dokerfile

Author: jojozhuang

Dockerfile

@@ -1,39 +1,38 @@
-# Usage:
+# https://nodejs.org/en/docs/guides/nodejs-docker-webapp/
+# https://medium.com/@VincentSchoener/development-of-nodejs-application-with-docker-and-typescript-part-2-4dd51c1e7766
 #
-#    Build image:
-#    docker build -t code-editor .
+# Builder stage.
+# This state compile our TypeScript to get the JavaScript code
 #
-#    Run image (on localhost:8080):
-#    docker run --name text-compare -p 8080:80 text-compare
-#
-#    Run image as virtual host (read more: https://github.com/jwilder/nginx-proxy):
-#    docker run -e VIRTUAL_HOST=text-compare.your-domain.com --name text-compare text-compare
+#FROM node:15.12.0 AS builder
 
-# Stage 1, based on Node.js, to build and compile Angular
+#WORKDIR /usr/src/app
 
-FROM node:9.4.0-alpine as builder
+#COPY package*.json ./
+#COPY webpack*.js ./
+#COPY .babelrc ./
+#COPY ./src ./src
+#COPY ./public ./public
+#RUN npm ci --quiet && npm run build
 
-COPY package.json ./
+#
+# Production stage.
+# This state compile get back the JavaScript code from builder stage
+# It will also install the production package only
+#
+FROM node:15.12.0-alpine
 
-## Storing node modules on a separate layer will prevent unnecessary npm installs at each build
-RUN npm i && mkdir /ng-app && mv ./node_modules ./ng-app
+WORKDIR /app
 
-WORKDIR /ng-app
+# environment variables
+ENV PORT=80
 
 COPY . .
+#COPY ./src ./build/src
+#RUN npm ci --quiet --only=production
 
-RUN npm run build:aot:prod
-
-# Stage 2, based on Nginx, to have only the compiled app, ready for production with Nginx
-
-FROM nginx:1.13.12-alpine
-
-COPY ./config/nginx-custom.conf /etc/nginx/conf.d/default.conf
-                                  
-## Remove default nginx website
-RUN rm -rf /usr/share/nginx/html/*
-
-## From ‘builder’ stage copy over the artifacts in dist folder to default nginx public folder
-COPY --from=builder /ng-app/dist /usr/share/nginx/html
+# We just need the build to execute the command
+#COPY --from=builder /usr/src/app ./build
 
-CMD ["nginx", "-g", "daemon off;"]
+#CMD [ "node" "/build/src/server/index.js" ]
+CMD [ "node", "server.js" ]

README.md

@@ -44,3 +44,19 @@ Read portfolio [Code Editor(React)](https://jojozhuang.github.io/project/code-ed
 
 # Tutorial
 Read tutorial [Building Online Code Editor with React and Express](https://jojozhuang.github.io/tutorial/building-online-code-editor-with-react-and-express) to learn how this online code editor is built.
+
+
+# Docker
+Build for production. All the compiled html files and js files will be generated in `dist`.
+```sh
+npm run build
+```
+Create image with nginx.
+```sh
+docker build -t jojozhuang/code-editor .
+```
+Create container.
+```sh
+docker run --name code-editor -p 9010:80 -d jojozhuang/code-editor
+```
+Access http://192.168.0.2:9010/ in browser.