Web Site Temple with Nginx-VueJS (Vuetify)-Flask

Instructions

Directly after clone cd coris_db, create node_modules folder:

docker run \
  --rm \
  -v $PWD/vue/project:/project \
  -w /project \
  node:lts-alpine3.17 npm i

Start all services:

docker compose up -d

Check they are running:

docker compose ps

Creating Front End Prod Updates

As noted at vue/project/README.md the vue dev cli is running yarn dev. We need to run yarn build to make an initial prod or a new prod version. Shell into vue service.

docker compose exec vue sh

This drops you here:

/project #

Then run the build command:

/project # yarn build

Prod vs Dev

Nginx is serving a prod build of the UI at ./vue/project/dist. However docker compose is starting a dev vue server running at the same time.

What is happening?

Port mappings at a glance (defined in docker-compose.yml):

Nginx (listening on port 80):
- matches "/" url patterns and sends to prod (./vue/project/dist)
- matches "/api" url pattern and sends to flask:8080
Dev Vuetify instance running on port 3000

Summary:

http://localhost or http://localhost:80 is production front end
http://localhost/api or http://localhost:80/api is flask backend api
http://localhost:3000 is dev front end

If running behind vpn or firewall you may need to port forward to your local machine in order to run.

Port Forward Source

local_port=XXXX
remote_port=YYYY
remote_ip=XX.XXX.XXX.XX
user=ubuntu
ssh -N -f -L localhost:$local_port:$remote_ip:$remote_port $user@$remote_ip

Find what's running on specific port so you can kill ssh tunnel when done:

port=XXXX
ss -tulpn | grep :$port

# kill it
kill <PID from ss command>

Misc notes that helped me put this together

NGINX and FLASK Deploy: This helped create a prod flask instance with nginx. source

Nginx Notes: This helped me understand how to deploy both the flask and vue app through nginx nginx-notes in general

Vue Notes: source When first starting I had no .vue/project directory. I had to do the following:

docker run \
  -it \
  --rm \
  -v ./vue/project:/project \
  --entrypoint sh \
  node:lts-alpine3.17

Once in container: