Stubbing Out and Documenting FastAPI, VueJS 3 and Docker Workflow
fastapi-vue3-docker-workflow
Stubbing out and documenting FastAPI, VueJS 3 and Docker workflow.
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
- From frontend DIR, create Docker image
- docker build . -t frontend
- docker run -d -p 8080:80 frontend
-
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=$
-
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/
-
- 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
- systemctl stop nginx
- systemctl start nginx
- systemctl restart nginx
- systemctl reload nginx
- 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
Download Details:
Author: LarryEitel
Source Code: https://github.com/LarryEitel/fastapi-vue3-docker-workflow
#vue #vuejs #javascript
47.00 GEEK