> For the complete documentation index, see [llms.txt](https://petercheng7788.gitbook.io/developer-note/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://petercheng7788.gitbook.io/developer-note/devop/examples/deploy-nextjs-on-gcp.md).

# Deploy NextJS on GCP

## Create Docker Image

```
# Install dependencies only when needed
FROM node:alpine
ENV NODE_ENV production
WORKDIR /app
COPY . .
RUN npm install && npm run build
EXPOSE 3000
CMD ["npm", "start"]
```

```
#.dockerignore
node_modules
.next
npm-debug.log
.husky
.github
```

## Setup GCP environment

* Start New Project and push docker image to gcp container registry

```
gcloud auth login
gcloud auth configure-docker
docker push asia.gcr.io/${PROJECT_ID}/${IMAGE_NAME}
```

![](/files/-MbgPPOGAbc6d5RyKr1R)

* Create New Service for run the docker image

![](/files/-MbgPf99McFGq0oGm4Fe)

## Setup Pipeline

* Set pipeline by using github action

```yaml
# This is a basic workflow to help you get started with Actions
name: My Website CI

# Controls when the action will run. 
on:
  # Triggers the workflow on push or pull request events but only for the main branch
  push:
    branches: [ main ]

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "build"
  build:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest
    env:
      IMAGE_NAME: asia.gcr.io/${{ secrets.GCP_PROJECT_ID }}/my-website
    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - name: Checkout
        uses: actions/checkout@v2     
             
      # Install NodeJS
      - name: Setup Node.js environment
        uses: actions/setup-node@v2.1.5
        
      # Install node_modules
      - name: Install Node_modules
        run: npm install

      # Fix Style
      - name: Fix Style
        run: npm run lint && npm run lint:style
        
      # GCP Login
      - name: GCP Login
        uses: GoogleCloudPlatform/github-actions/setup-gcloud@master
        with:
          project_id: ${{ secrets.GCP_PROJECT_ID }}
          service_account_email: ${{ secrets.GCP_EMAIL }}
          service_account_key: ${{ secrets.GCP_CREDENTIALS }}
          
      - name: GCP Configure Docker
        run: gcloud auth configure-docker --quiet
      
      # Build Docker Image
      - name: Build Docker image
        run: docker build . -t $IMAGE_NAME
        
      # Push Docker Image   
      - name: Push Docker image
        run: docker push $IMAGE_NAME  
      
      # Deploy to Cloud Run
      - name: Deploy to Cloud Run
        run: gcloud run deploy my-website --image $IMAGE_NAME --region asia-east1  --platform managed
```

## References

{% embed url="<https://cloud.google.com/community/tutorials/cicd-cloud-run-github-actions>" %}

{% embed url="<https://nextjs.org/learn/basics/deploying-nextjs-app>" %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://petercheng7788.gitbook.io/developer-note/devop/examples/deploy-nextjs-on-gcp.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.