DEV Community

Mohd Rashid
Mohd Rashid

Posted on • Edited on

Vuejs application showing no webpage was found for the web address http error 404

Hi All,

I have a repo in github its having Vue.js (Mosaic Vue) application running in AWS (App Runner).

Now, i want to deploy Vue.js (Mosaic Vue) and Vite plugin application in Google cloud run using github action

Here is my action.yml file

name: Create and publish a Docker image

on: 
  push:
    branches: ['main']

env:
  PROJECT_ID: ${{ secrets.GKE_PROJECT }}
  REPOSITORY: webui                          # Add your repository name here.
  GAR_LOCATION: us-west2                     # Add your repository region name here.
  IMAGE: webui                               # Add your image name here.
  IMAGE_TAG: $(date "+%F-%H%M")              # Add your image date-tag name here.

  GCR_SERVICE: webui                         # Add your cloud run service name here.
  GCR_REGION: us-west1                       # Add your cloud run region name here.

  GKE_CLUSTER: us-cluster1                      # Add your cluster name here.
  GKE_ZONE: us-central1-c                       # Add your cluster zone here.

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

      permissions:
        contents: 'read'
        id-token: 'write'

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

### Authentication via credentials json ###
      - name: 'Authenticate to Google Cloud'
        id: 'auth'
        uses: 'google-github-actions/auth@v2'
        with:
          credentials_json: '${{ secrets.GOOGLE_APPLICATION_CREDENTIALS }}'  

### Set up Cloud SDK ###
      - name: Set up Cloud SDK
        uses: google-github-actions/setup-gcloud@v2
        with:
          project_id: '${{ env.PROJECT_ID }}'    

### Docker Authenticating ###        
      - name: 'Docker Auth'
        run: |-
          gcloud auth configure-docker ${{ env.GAR_LOCATION }}-docker.pkg.dev

### Nodejs v20.11.0 Using ###
      - name: Setup Node.js environment
        uses: actions/setup-node@v4.0.1
        with:
          name: node-version
          node-version: 20.11.0   

      - name: Install dependencies
        run: |-
          cd /home/runner/work/WebUI/WebUI/mosaic-vue/
          npm install
          npm run build

      # - name: Build Vite.js project
      #   run: npm run build

### Build and Push the Docker image to Google Artifact Registry (GAR) ###
      - name: Build and Push to Google Artifact Registry
        run: |-
          docker build -t ${{ env.GAR_LOCATION }}-docker.pkg.dev/${{ env.PROJECT_ID }}/${{ env.REPOSITORY }}/${{ env.IMAGE }}:${{ github.sha }} -f ./docker/Dockerfile .
          docker tag ${{ env.GAR_LOCATION }}-docker.pkg.dev/${{ env.PROJECT_ID }}/${{ env.REPOSITORY }}/${{ env.IMAGE }}:${{ github.sha }} ${{ env.GAR_LOCATION }}-docker.pkg.dev/${{ env.PROJECT_ID }}/${{ env.REPOSITORY }}/${{ env.IMAGE }}:${{ env.IMAGE_TAG }}                                                                                                
          docker push ${{ env.GAR_LOCATION }}-docker.pkg.dev/${{ env.PROJECT_ID }}/${{ env.REPOSITORY }}/${{ env.IMAGE }}:${{ env.IMAGE_TAG }}

### Get the Deploying Container to Gooogle Cloud RUN ###
      - name: Deploy to Cloud Run
        run: |
           gcloud run deploy ${{ env.GCR_SERVICE }} \
             --image ${{ env.GAR_LOCATION }}-docker.pkg.dev/${{ env.PROJECT_ID }}/${{ env.REPOSITORY }}/${{ env.IMAGE }}:${{ env.IMAGE_TAG }} \
             --region ${{ env.GCR_REGION }} \
             --platform managed \
             --allow-unauthenticated \
             --port=8080 \
             --timeout=3600 \
             --update-labels commit-sha=${{ github.sha }}

      - name: 'Show output'
        run: echo ${{ steps.deploy.outputs.url }}   

### Deploy the Docker image to the GKE cluster ###
      - name: Deploy to GKE
        # env:
        #   GOOGLE_PROJECT: ${{ secrets.DEV_PROJECT }}
        run: |
          gcloud container clusters get-credentials dev-autopilot --region us-central1 --project xxxx-dev
          gcloud components install gke-gcloud-auth-plugin
          kubectl apply -f webui.yaml
Enter fullscreen mode Exit fullscreen mode

Here is the screenshot of domain name not working with /home or /dashboard showing 404 not found

Image description

Here is my domain name dev.xxxx.us ---> this is working fine but when i add dev.xxx.us/home its showing 404 page not found. I dont know where im wrong and what im missing in action.yml or need to change code of github repo from 3 week im struggling to solve this issue googling and chatgpt its not working even i add npm v20 but nothing work for me

And we also we manage.auth0.com for redirecting URL ..like allowed callback URL or Logout URL i already added domain name

plse tell me how to solve it

Top comments (0)