0

I'm working on a project involving the deployment of a Next.js application on a Google Cloud Virtual Machine. To streamline the deployment process, I used GitHub Actions for CI/CD, and I've encapsulated my application within a Docker container for enhanced portability.

Everything worked well and the CI/CD passsed and I transferred the docker container file into the GCP VM successfully. Upon configuring the Dockerized content with an Nginx web server, I encountered a 502 status error when I browse the IP address in a web browser after configuration.

Sudo docker ps and Nginx is running successfully and there are no problems.

Here is the the Nginx configuration file, inside the /etc/nginx/sites-available/my-file:

upstream nextjs_upstream {
    server 172.17.0.2:3000;
}

server {
    listen 80;
    server_name IP_ADDRESS;

    location / {
        proxy_pass http://nextjs_upstream;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_cache_bypass $http_upgrade;
        proxy_connect_timeout 300s;
        proxy_send_timeout 300s;
        proxy_read_timeout 300s;
    }
}

Here is the Github actions file:

name: Deploy to GCP VM

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v2

      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v1
      
      - name: Build and push Docker image
        uses: docker/build-push-action@v2
        with:
          context: .
          push: true
          tags: gcr.io/aevue-com/aevue-com:${{ github.sha }}

      - name: SSH into GCP VM and update Docker container
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.VM_HOST }}
          username: ${{ secrets.SSH_USERNAME }}
          key: ${{ secrets.SSH_PRIVATE_KEY }}
          script: |
            sudo docker pull gcr.io/project-id/image_name:${{ github.sha }}
            sudo docker stop image_name || true
            sudo docker rm image_name || true
            sudo docker run -d --name project_id -p 3000:3000 gcr.io/project-id/image_name:${{ github.sha }}

Here is the error I encountered, from error log:

[error] 9348#9348: *167 upstream timed out (110: Connection timed out) while reading response header from upstream, client: 74.208.58.113, server: IP_ADDRESS, request: "GET / HTTP/1.1", upstream: "http://172.17.0.2:3000/", host: "IP_ADDRESS.bc.googleusercontent.com"

I'm reaching out to fellow developers who might have ventured down a similar path. Have you successfully navigated through the intricacies of deploying a Next.js project on a Google Cloud VM using GitHub Actions and Docker, only to be stumped by the enigmatic 502 status error after integrating Nginx? or anyother related errors?

If you've conquered this challenge or have insights to share, I'd greatly appreciate any guidance, documentation, or even just some wisdom from your experience.

Looking forward to your valuable input and thank you in advance for being part of this exciting journey!

I tried to solve and dig everything, but I couldn't see it in my web browser when I hit my IP_ADDRESS on the web browser. I'm thinking if there is any error in my Nginx configuration or any related issues.

Yishak-KD
  • 1

0 Answers0