#36 Add local docker setup with hot-reload by LeoQiu981112 · Pull Request #51 · OpenBCca/openbc-web

LeoQiu981112 · 2023-12-26T22:08:35Z

Setup OpenBC to run in docker container #36

Added corresponding docker files for project, with hot-reload and pre-render
updated wiki manually

umsu2 · 2023-12-26T22:49:29Z

there is many issues with this approach.
it is not a good production build because you shouldnt run npm install in prod build. better approach would be to build in pipeline or multistep build then copy the final files into the prod build. also the file mounting is a little weird not sure what is happening there.

LeoQiu981112 · 2023-12-26T23:19:33Z

there is many issues with this approach. it is not a good production build because you shouldnt run npm install in prod build. better approach would be to build in pipeline or multistep build then copy the final files into the prod build. also the file mounting is a little weird not sure what is happening there.

This ticket is meant for dev/local environment only, and the mounting is used for enabling next.js hot reload as per the ticket requirement. The ask/requirement is as follows.

Task
Setup OpenBC to run in Docker Container
Update 'npm start' command to run docker instance
Ensure that changes to files are deployed into the container (hot reload)
Create Wiki on how to install Docker locally
Deployment into container should be based on pre-rendered pages
Note: This change is only to local development. Wiki pages cannot support docker.

Dockerfile

.prettierrc

Co-authored-by: Alja Čekada <112892699+alchuu00@users.noreply.github.com>

docker-compose.yml

Dockerfile

SamHuo213 · 2024-01-06T07:56:59Z

next.config.js

-  basePath: process.env.NODE_ENV === 'production' ? '/openbc-web' : '',
-  output: 'export',
-  distDir: 'dist',
+  basePath: process.env.NODE_ENV === 'production' ? '' : '',


Change this to be empty string only. Remove the ternary.

SamHuo213 · 2024-01-06T07:58:03Z

src/app/about/page.tsx

-import React from 'react';
 import { Typography } from '@mui/material';
 import Container from '@mui/material/Container';
+import React from 'react';


Why did you add this?

SamHuo213 · 2024-01-06T07:58:41Z

Dockerfile

+COPY --from=builder /app/node_modules ./node_modules
+COPY --from=builder /app/package.json ./package.json
+CMD ["node", ".next/standalone/server.js"]
+


Make sure there is no extra line at end of file.

SamHuo213 · 2024-01-06T08:06:14Z

Dockerfile

@@ -0,0 +1,24 @@
+FROM node:18-alpine as base
+RUN apk add --no-cache g++ make py3-pip libc6-compat


Why do you need all these dependency?

SamHuo213 · 2024-01-06T08:21:56Z

next.config.js

  typescript: {
    tsconfigPath: './tsconfig.json',
  },
+  webpackDevMiddleware: (config) => {


Are we sure we need this?

I get a warning that this is not recognized.

@LeoQiu981112 , @alchuu00 , @umsu2

this seems like it's used for dev watching purposes. not sure how this will work in production.
working with docker + watching the files is not trivial. what happens with file mounting is that the the node runtime in your local system is doing the transpiling, then gets mounted over to the docker node runtime which runs the code.
what we probably want is to have the build/run command run from the docker container instead of your own system. the best litmus test to have it setup properly is to actually not have node.js installed on your machine. can you use docker, docker compose to run the app in container. that's the only way to garantee consistency in terms of build across dev machines/production

Trying to hot reload and having it mimic product might be to much work right now.

Perhaps we could forgo hot reload for now and just focus on building it like production.

Create a ticket to look into hot reload.

SamHuo213 · 2024-01-06T09:28:40Z

@LeoQiu981112 , still looking at this.

Hold off on changes.

umsu2 · 2024-01-09T02:10:08Z

Dockerfile

+WORKDIR /app
+COPY package*.json ./
+EXPOSE 3000
+
+FROM base as builder
+WORKDIR /app
+RUN npm install
+COPY . .
+RUN npm run build


not sure why the base exists without having even the src file in there
i'd recommend taking a look at this https://medium.com/@maheshwar.ramkrushna/optimized-docker-multistage-build-for-node-js-application-deployment-with-nginx-17655b9e62c1
the idea is pretty similar
your base has the source code copied over with the build command. which builds the artifact
the second stage is just copyinig over the build artifact over to the production image which should be as minimalistic as possible with the least amount of permissions (similar to what you have below)

SamHuo213 · 2024-01-09T04:44:22Z

@LeoQiu981112, @umsu2 ,

The current configuration is confusing. Could we simplify it down?

docker-compose.yml

next.config.js

Dockerfile

LeoQiu981112 · 2024-01-10T00:29:35Z

@LeoQiu981112, @umsu2 ,

The current configuration is confusing. Could we simplify it down?

docker-compose.yml

next.config.js

Dockerfile

simplified the configs as requested. I think for windows systems might need to run npm run lint first before building

LeoQiu981112 added 2 commits December 26, 2023 13:33

Add local docker setup with hot-reload

b33a53a

Add anon volumes

8589965

LeoQiu981112 requested review from CorreyL, PooriaT, SamHuo213, Unknown-0perator, immangat, nam-m, openBC-ca, tanmpham and umsu2 as code owners December 26, 2023 22:08

change os end of line config and dockerfile settings

e254e82

alchuu00 reviewed Dec 29, 2023

View reviewed changes

Dockerfile Outdated Show resolved Hide resolved

SamHuo213 reviewed Dec 29, 2023

View reviewed changes

.prettierrc Outdated Show resolved Hide resolved

Update Dockerfile

6300000

Co-authored-by: Alja Čekada <112892699+alchuu00@users.noreply.github.com>

SamHuo213 reviewed Dec 30, 2023

View reviewed changes

docker-compose.yml Outdated Show resolved Hide resolved

SamHuo213 reviewed Dec 30, 2023

View reviewed changes

Dockerfile Outdated Show resolved Hide resolved

SamHuo213 reviewed Dec 30, 2023

View reviewed changes

Dockerfile Outdated Show resolved Hide resolved

LeoQiu981112 added 4 commits December 31, 2023 01:26

updated docker settings, and add hot-reload for dev

cfa8f18

undo eol change in .prettierrc

fd42ddf

next config file changes

672563d

local container config tweaks

0ebd8a8

SamHuo213 reviewed Jan 6, 2024

View reviewed changes

umsu2 reviewed Jan 9, 2024

View reviewed changes

simplified configs, remove unused import in about page

b01cc87

LeoQiu981112 requested a review from SamHuo213 January 27, 2024 15:57

		@@ -0,0 +1,24 @@
		FROM node:18-alpine as base
		RUN apk add --no-cache g++ make py3-pip libc6-compat

Conversation

LeoQiu981112 commented Dec 26, 2023

Uh oh!

umsu2 commented Dec 26, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

LeoQiu981112 commented Dec 26, 2023

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

SamHuo213 commented Jan 6, 2024

Uh oh!

Choose a reason for hiding this comment

Uh oh!

SamHuo213 commented Jan 9, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

LeoQiu981112 commented Jan 10, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

umsu2 commented Dec 26, 2023 •

edited

Loading

SamHuo213 commented Jan 9, 2024 •

edited

Loading