Docker dev and prod working.

Author: LarryEitel

.idea/vcs.xml

@@ -1,6 +1,9 @@
 # fastapi-vue3-docker-workflow
 Stubbing out and documenting FastAPI, VueJS 3 and Docker workflow.
 
+NOTE: This is a sandbox project. Glean ideas only.
+
+
 ![Build Containers for Prod & Push to Dockerhub](https://github.com/LarryEitel/fastapi-vue3-docker-workflow/workflows/Build%20Containers%20for%20Prod%20&%20Push%20to%20Dockerhub/badge.svg)
 
 ## Must Reads
@@ -13,9 +16,21 @@ Stubbing out and documenting FastAPI, VueJS 3 and Docker workflow.
   - yarn serve and [http://localhost:8080/](http://localhost:8080/)
 - [X] Push to Git
 - [X] Create Dockerfile to run Vue from Docker
-  - From frontend DIR, [create Docker image](https://cli.vuejs.org/guide/deployment.html#docker-nginx)
-  - docker build . -t frontend
-  - docker run -d -p 8080:80 frontend
+  - [Dockerizing a Vue App](https://mherman.org/blog/dockerizing-a-vue-app/)
+    
+  - For Dev
+    - docker build -f ./frontend/DockerfileDev -t frontend:dev ./frontend
+    - Hot loading doesn't work with this as expected. Only with docker-compose
+    - docker run -it -v ${PWD}:/app -v /app/node_modules -p 8080:8080 -e CHOKIDAR_USEPOLLING=true --rm frontend:dev
+    - docker-compose -f docker-compose-dev.yml up -d
+
+  - For Prod
+    - docker build -f ./frontend/Dockerfile -t frontend:prod ./frontend
+    - winpty docker run -it -p 80:80 --rm frontend:prod
+    - docker-compose
+    - docker-compose up -d --build
+    
+
 - [x] Create GitAction to build docker image and push to dockerhub
   - Confirm image arrived at private [hub.docker.com](https://hub.docker.com/)
 - [x] Create [DigitalOcean](digitalocean.com) Droplet for <domain.com>
@@ -46,8 +61,6 @@ Stubbing out and documenting FastAPI, VueJS 3 and Docker workflow.
         - sudo ./svc.sh install
         - sudo ./svc.sh start
         - sudo ./svc.sh status
-    - QUESTION: How to follow log?
-      - sudo journalctl -u actions.runner........
 - [x] Docker Prep
   - mkdir /root/devops
   - cd /root/devops
@@ -65,10 +78,10 @@ Stubbing out and documenting FastAPI, VueJS 3 and Docker workflow.
   - Confirm server is running
     - systemctl status nginx
   - Key nginx commands
-    - systemctl stop nginx
+    - sudo systemctl stop nginx
     - systemctl start nginx
     - systemctl restart nginx
-    - systemctl reload nginx
+    - sudo systemctl reload nginx
     - systemctl disable nginx
     - systemctl enable nginx
     - systemctl status nginx.service

README.md

@@ -0,0 +1,14 @@
+version: '3'
+services:
+  client:
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile
+    ports:
+      - "8080:8080"
+    container_name: frontend
+    volumes:
+       - ./frontend:/app
+       - /app/node_modules
+    environment:
+      - CHOKIDAR_USEPOLLING=true

docker-compose-dev.yml

@@ -1,14 +1,9 @@
-version: '3'
+version: '3.7'
 services:
-  client:
+  frontend-prod:
+    container_name: frontend-prod
     build:
       context: ./frontend
-      dockerfile: Dockerfile
+      dockerfile: DockerfileProd
     ports:
-      - "8080:8080"
-    container_name: frontend
-    volumes:
-       - ./frontend:/app
-       - /app/node_modules
-    environment:
-      - CHOKIDAR_USEPOLLING=true
+      - '80:80'

docker-compose.yml

@@ -1,2 +1,4 @@
 **/node_modules
 **/dist
+**/.git
+**/.gitignore

frontend/.dockerignore

@@ -1,20 +1,22 @@
-# FROM mhart/alpine-node:15.5.1
-FROM node:lts-alpine
-
+# build environment
+FROM node:15.5.1-alpine as build
 WORKDIR /app
+ENV PATH /app/node_modules/.bin:$PATH
 
-COPY package*.json ./
-RUN npm install
+# COPY package.json /app/package.json
+COPY package.json ./
 
+RUN npm install --silent
+RUN npm install @vue/[email protected] -g
 
 COPY .eslintrc.js ./
 COPY babel.config.js ./
-
 COPY . .
 
-RUN ls
-RUN ls ./src
-
-EXPOSE "${PORT:-8080}:80"
+RUN npm run build
 
-CMD ["yarn", "serve"]
+# production environment
+FROM nginx:1.19.6-alpine
+COPY --from=build /app/dist /usr/share/nginx/html
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

frontend/Dockerfile

@@ -0,0 +1,19 @@
+FROM node:lts-alpine
+
+WORKDIR /app
+
+# add `/app/node_modules/.bin` to $PATH
+ENV PATH /app/node_modules/.bin:$PATH
+
+COPY package*.json ./
+RUN npm install
+
+
+COPY .eslintrc.js ./
+COPY babel.config.js ./
+
+COPY . .
+
+CMD ["yarn", "serve"]
+
+# docker run -d -p 8080:8080 frontend

frontend/Dockerfile-dev

@@ -8,7 +8,7 @@
         >vue-cli documentation</a
       >.
     </p>
-    <h3>Installed CLI Plugins</h3>
+    <h3>Installed CLI Plugins asdfasdfasd asdfasdf</h3>
     <ul>
       <li>
         <a

frontend/DockerfileDev

@@ -0,0 +1,43 @@
+server {
+
+	server_name craulio.com www.craulio.com;
+
+	location / {
+		proxy_pass http://localhost:8080;
+		proxy_http_version 1.1;
+		proxy_buffering off;
+		proxy_set_header Upgrade $http_upgrade;
+		proxy_set_header Connection 'upgrade';
+		proxy_set_header Host $host;
+		# proxy_set_header X-Real-IP $remote_addr;
+		proxy_cache_bypass $http_upgrade;
+	}
+
+    listen 443 ssl; # managed by Certbot
+    ssl_certificate /etc/letsencrypt/live/craulio.com/fullchain.pem; # managed by Certbot
+    ssl_certificate_key /etc/letsencrypt/live/craulio.com/privkey.pem; # managed by Certbot
+    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
+    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
+
+
+}
+server {
+    if ($host = www.craulio.com) {
+        return 301 https://$host$request_uri;
+    } # managed by Certbot
+
+
+    if ($host = craulio.com) {
+        return 301 https://$host$request_uri;
+    } # managed by Certbot
+
+
+	listen 80;
+
+	server_name craulio.com www.craulio.com;
+    return 404; # managed by Certbot
+
+
+
+
+}