Vuejs to docker container in Github Actions

Question

I'm trying to find out how to best containerize my Vuejs app and then upload it to Google Container Registry.

I've hacked and slashed some stuff together but I don't think it's right, my container gets pushed to GCR but it doesn't work.

# My GitHub action file to build the container

name: Build and Push container to GCR

on:
  push:
    branches: [ master ]

env:
  PROJECT_ID: ${{ secrets.GKE_PROJECT }}
  DEPLOYMENT_NAME: my-deployment
  IMAGE: my-app-image

jobs:
  setup-build-publish:
    name: Setup, Build, Publish, and Deploy
    runs-on: ubuntu-latest

    steps:
    - name: Checkout
      uses: actions/checkout@master

    # Setup gcloud CLI
    - uses: GoogleCloudPlatform/github-actions/setup-gcloud@0.1.3
      with:
        service_account_key: ${{ secrets.GKE_SA_KEY }}
        project_id: ${{ secrets.GKE_PROJECT }}

    # Configure Docker to use the gcloud command-line tool as a credential
    # helper for authentication
    - run: |-
        gcloud --quiet auth configure-docker

    # Build the Docker image
    - name: Build
      run: |-
        docker build \
          --tag "gcr.io/$PROJECT_ID/$IMAGE:$GITHUB_SHA" \
          --build-arg GITHUB_SHA="$GITHUB_SHA" \
          --build-arg GITHUB_REF="$GITHUB_REF" \
          .

    # Push the Docker image to Google Container Registry
    - name: Publish
      run: |-
        docker push "gcr.io/$PROJECT_ID/$IMAGE:$GITHUB_SHA"

My Dockerfile

FROM node:lts-alpine

# make the 'app' folder the current working directory
WORKDIR /app

# copy both 'package.json' and 'package-lock.json' (if available)
COPY package*.json ./

# install project dependencies
RUN npm install

# copy project files and folders to the current working directory (i.e. 'app' folder)
COPY . .

# build app for production with minification
RUN npm run build

I then deploy this container to clud run on GCP but I get the error

Cloud Run error: Container failed to start. Failed to start and then listen on the port defined by the PORT environment variable

I typically deploy to AppEngine, but I'm learning how to use containers, I'm not quite getting what I'm missing.

Stefan Neacsu Stefan Neacsu · Accepted Answer · 2020-10-02T14:27:46

The error you are getting is because you aren't listening for incoming HTTP requests in your code or you're listening for incoming requests on the wrong port.

As you can see documented in the Cloud Run container runtime, your container must listen for incoming HTTP requests on the port that is defined by Cloud Run and provided in the $PORT environment variable.

If this fails, the health check will fail to, and it would switch to an error state and the traffic will not be routed to the correct PORT.

I would post an example for Node.js and as I can see you do not have specified anything related to the port:

const port = process.env.PORT || 8080;
app.listen(port, () => {
  console.log('Hello world listening on port', port);
});

Vuejs to docker container in Github Actions

1 Answers