Deploying Your Portfolio Website on a Virtual Machine on GCP with a Custom Domain

This guide provides the steps to deploy your portfolio website on a VM instance on Google Cloud Platform (GCP) with a custom domain. Click HERE to check the website.

Step 0: Create your VM on Compute Engine, your custom domain on Google Domains and DNS records on Cloud DNS

1. There is a free tier VM option available on GCP, follow the required settings.
2. Create a domain from Google Domains
3. Go to Cloud DNS and create DNS records

Add or update the A records as follows:

• Host: @ (or leave blank, depending on the registrar)
• Type: A
• Value: Your GCE instance's external IP address
• TTL: Default or 3600 seconds Add or update the A records for the www subdomain:
• Host: www
• Type: A
• Value: Your GCE instance's external IP address
• TTL: Default or 3600 seconds

Verify DNS Propagation:

After updating your DNS records, it may take some time for the changes to propagate. You can check the status of your DNS records using a tool like DNS Checker.

Step 1: Set Up Your Environment

SSH into your VM:

• Click on SSH in Compute Engine or use the command below:

gcloud compute ssh your-vm-instance-name

Update the package list to ensure you have the latest information on the newest versions of packages and their dependencies:

sudo apt-get update

Install pip, the package installer for Python 3. The VM already had python3:

sudo apt install python3-pip

Clone your portfolio repository from GitHub:

git clone https://github.com/dieegogutierrez/Portfolio.git

Change directory to the cloned repository:

cd Portfolio/

Create a virtual environment:

python3 -m venv venv

Activate the virtual environemnt:

source venv/bin/activate

Install the required Python packages as specified in the requirements.txt file:

pip3 install -r requirements.txt

Install Nginx, a web server that will be used to serve your application:

sudo apt install nginx

Step 2: Configure Gunicorn

Create a Gunicorn systemd service file:

sudo nano /etc/systemd/system/portfolio.service

Add the following content, change it accordingly:

[Unit]
Description=gunicorn daemon for portfolio
After=network.target

[Service]
User=dieego_gutierrez
Group=www-data
WorkingDirectory=/home/dieego_gutierrez/Portfolio
Environment="PATH=/home/dieego_gutierrez/Portfolio/venv/bin"
ExecStart=/home/dieego_gutierrez/Portfolio/venv/bin/gunicorn --workers 3 --bind unix:/home/dieego_gutierrez/Portfolio/portfolio.sock run:app

[Install]
WantedBy=multi-user.target

Start and enable the Gunicorn service:

sudo systemctl start portfolio
sudo systemctl enable portfolio

Step 3: Configure Nginx

Remove the default configuration:

sudo rm /etc/nginx/sites-enabled/default

Create a new Nginx configuration file:

sudo nano /etc/nginx/sites-available/portfolio

Add the following content, change it accordingly:

server {
    listen 80;
    server_name dgutierrezengineer.com www.dgutierrezengineer.com;

    location / {
        proxy_pass http://unix:/home/dieego_gutierrez/Portfolio/portfolio.sock;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

Enable the configuration:

sudo ln -s /etc/nginx/sites-available/yourprojectname /etc/nginx/sites-enabled

Test and reload Nginx:

sudo nginx -t
sudo systemctl restart nginx

Step 4: Enable HTTPS with Certbot

Install Certbot and the Nginx plugin:

sudo apt install certbot python3-certbot-nginx

Obtain the SSL certificate:

sudo certbot --nginx -d dgutierrezengineer.com -d www.dgutierrezengineer.com

Step 5: Verify Your Deployment

Check the status of Gunicorn and Nginx:

sudo systemctl status portfolio
sudo systemctl status nginx

Step 6: Continuos Deployment with Cloud Build

DOCUMENTATION

Enable Cloud Build API and Secret Manager API.

On Cloud Build Repositories 2nd gen create a new host connection.

Link your repository.

Create a trigger and adapt the code below and create a cloudbuild.yml or use the inline option while creating the trigger.

steps:
  - name: 'gcr.io/cloud-builders/gcloud'
    args: ['compute', 'ssh', 'your-vm-instance-name', '--zone', 'your-zone', '--command', 'git config --global --add safe.directory /home/your_username/Portfolio && cd /home/your_username/Portfolio && git pull origin main && sudo systemctl restart portfolio']
options:
  logging: CLOUD_LOGGING_ONLY