Deployment - seanmccoyOSU/Interactive-Survey-Tools-For-Data-Visualizations GitHub Wiki

This application uses Docker Compose to build a multi-service system consisting of APIs, user interfaces, and MySQL databases for both the main survey service and the visualization service. The following documentation describes how to deploy and run the application in a production environment using Google Cloud Platform.

1. Log into your google account on the Google Cloud Platform. If you are a new user, you should be given $300.00 worth of credits to use when deploying the application to a static URL (the costs depend on the memory and power of the VM instance used to run the application).
2. Create a new project

1. Use the search bar at the top to search "VM Instances"
2. Create a new VM instance and give it a relevant name like "survey-vm"
3. Select the zone that you currently reside in
4. Select the E2 machine type with a medium size (4GB RAM)
5. Under the networking section, check "Allow HTTP traffic" and "Allow HTTPS traffic" and tag the instance with a network tag such as http-server
6. Press create and wait for the VM instance to finish being created

1. Click on the SSH button next to the VM instance name
2. Install Docker and Docker Compose with the following prompts:

# Install Docker
sudo apt update
sudo apt install -y docker.io
sudo systemctl start docker
sudo systemctl enable docker
sudo usermod -aG docker $USER

# Log out and log back in OR run:
newgrp docker

# Install Docker Compose
sudo curl -L "https://github.com/docker/compose/releases/download/v2.24.6/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
sudo chmod +x /usr/local/bin/docker-compose
docker-compose version

3. Exit the shell session and log back in

1. There should be a section called "External IP" next to your VM instance name. Copy this
2. In the env.production file in the root directory, change the URLs to use the IP. If the VM IP was, for instance, 34.82.95.154, you would update the file to have:

MAIN_API_URL=http://34.82.95.154:5050
MAIN_UI_URL=http://34.82.95.154:5000
VISUAL_API_URL=http://34.82.95.154:8080
VISUAL_UI_URL=http://34.82.95.154:8000

1. On your local device (i.e. VS Code, NOT the VM instance), run this to log into google cloud:

gcloud auth login

2. List the projects that are currently under your account

gcloud projects list

3. Set the current project to the one you've created

gcloud config set PROJECT_NAME_HERE

4. Open up all firewall ports for testing (change to specific ports when deploying publicly):

gcloud compute firewall-rules create allow-all-ports \
  --allow tcp:0-65535 \
  --source-ranges=0.0.0.0/0 \
  --target-tags=http-server \
  --description="Allow all ports for testing"

5. Create a compressed tarball archive of the application:

tar --exclude='node_modules' --exclude='.git' -czf app.tar.gz .

6. Copy the tarball file into the VM instance:

gcloud compute scp app.tar.gz <vm-name>:~

7. In the VM shell, extract the acrhive:

tar -xzf app.tar.gz
cd <your-app-directory>

8. Ensure that all files are there by running ls -la. Look specifically for .env, .env.production

1. Use the VM shell. Since we are deploying, we don't need the regular ".env" file anymore. To replace this with the ".env.production" file, use

mv .env.production .env

CAUTION: DO NOT USE UNSECURE DEFAULT VALUES

2. Use docker compose to build the project and run it in the VM instance.

docker compose -f docker-compose.prod.yml up --build

3. Ensure that all ports are running fully in your browser:

http://<EXTERNAL_IP>:5000 → Main UI
http://<EXTERNAL_IP>:8000 → Visualization UI
http://<EXTERNAL_IP>:5050 → Main API (JSON)
http://<EXTERNAL_IP>:8080 → Visualization API (JSON)

4. Run this command to clean up everything:

docker compose down