fastapi-vue3-docker-workflow

Stubbing out and documenting FastAPI, VueJS 3 and Docker workflow.

NOTE: This is a sandbox project. Glean ideas only.

• Copy private key to github secrets

• Copy public key to DigitalOcean authorized_keys

Must Reads

• Deploying Self-Hosted Github Actions Runners with Docker

Punchlist

• Create sample vue frontend

  • From frontend DIR, Vue CLI create project (Installed in same DIR and selected default Vue3)
  • yarn serve and http://localhost:8080/

• Push to Git

• Create Dockerfile to run Vue from Docker

  • 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

  • On Digitalocean

    • ~/actions-runner/_work/fastapi-vue3-docker-workflow/fastapi-vue3-docker-workflow

• Create GitAction to build docker image and push to dockerhub

  • Confirm image arrived at private hub.docker.com

• Create DigitalOcean Droplet for <domain.com>

• Setup Shell access

  • (nice instructions)
  • use puttygen to convert private key to .ppk

• Replace ubuntu prompt

  • PS1=$

• Create user

  • adduser larry
  • adduser larry sudo
    • or usermod -aG sudo larry?
  • sudo su - larry
  • verify docker group exists
    • cat /etc/group
  • as root: add user to docker group
    • sudo usermod -aG docker larry

• Github runner

  • Nice
    • Automatically Deploy Docker + Wordpress To Digitalocean With Github Actions - CI&CD
    • Deploying Self-hosted Runners for GitHub Actions
    • Deploying to Digitalocean
  • github actions
    • See final part of comment re deploy image to DO
    • Add runner following instructions
    • Install as service
      • from /home/larry/actions-runner
        • sudo ./svc.sh install
        • sudo ./svc.sh start
        • sudo ./svc.sh status

• Docker Prep

  • mkdir /root/devops
  • cd /root/devops
  • docker login
  • pull image
    • docker pull larryeitel/fastapi-vue3-docker-workflow
  • run container and verify
    • docker run -d -p 8080:80 larryeitel/fastapi-vue3-docker-workflow
    • http://:8080/

• Install nginx

  • sudo apt update
  • sudo apt install nginx
  • ufw allow 'Nginx HTTP'
  • ufw delete allow 'Nginx HTTP'
  • Confirm server is running
    • systemctl status nginx
  • Key nginx commands
    • sudo systemctl stop nginx
    • systemctl start nginx
    • systemctl restart nginx
    • sudo systemctl reload nginx
    • sudo systemctl disable nginx
    • systemctl enable nginx
    • systemctl status nginx.service
  • Visit droplet IP to see NGINX page.
  • Configure nginx
    • ln -s /etc/nginx/sites-available/ /etc/nginx/sites-enabled/
  • Update snap
    • snap install core; sudo snap refresh core
  • snap install --classic certbot

• Generate SSL

  • Check ubuntu version: cat /etc/os-release
  • Visit Certbot
  • certbot --nginx -d example.com -d www.example.com
  • Verify systemctl status certbot.timer

Inspired by Deploying a Web App with Docker & Github Actions