서버리스 컨테이너와 서버리스 Next.js SSR GCP Cloud Run

서버리스 컨테이너와 서버리스 Next.js SSR GCP Cloud Run

2022-10-13 last update

11 minutes reading googlecloud nextjs react containers
0단계: 확인

GCP 클라우드 런



나는 the guide of Geshan Manandhar 에서 영감을 얻었습니다. 작동하게 만드는 방법에 대한 예는 더 적습니다. 현재 가이드는 해당 주제에 대한 우주 최고 중 하나일 수 있습니다. :)

가장 먼저 해야 할 일은 create a new project:



그런 다음 source cloud
리포지토리를 만듭니다.

이제 cloud ide 훌륭하고 이미 설정되어 있으므로, 그렇지 않으면 로컬에서 gcloud CLI를 설정해야 합니다.

리포지토리 페이지에서 gcloud 로 리포지토리를 복제하는 방법을 확인하고 있습니다.


그리고 클라우드 ide 내에서 사용 가능한 클라우드 셸에서 수행합니다.

git config --global user.email "[email protected]"
git config --global user.name "Your Name"
git config --global init.defaultBranch main  

gcloud source repos clone nextgcp --project=nextgcp-356220
Cloning into '/home/hexfloor/nextgcp'...
warning: You appear to have cloned an empty repository.
Project [nextgcp-356220] repository [nextgcp] was cloned to [/home/hexfloor/nextgcp].

yarn create next-app
✔ What is your project named? … nextgcp

Success! Created nextgcp at /home/hexfloor/nextgcp

cd nextgcp/
git add -A
git commit -m "init"
git push --set-upstream origin main


그런 다음 클라우드 ID에서 폴더를 열 수 있으며 다음이 있어야 합니다.


multi stage build 와 함께 Dockerfile 를 추가합니다. docker hub download rate limit 이므로 gcp mirror 를 사용해야 할 수도 있습니다. GCP에서 자동으로 구성된다고 가정합니다. 파손되지 않은 경우 - 수리하지 마십시오. :)

# Install dependencies only when needed
FROM node:alpine AS deps
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
RUN apk add --no-cache libc6-compat
WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile

# If using npm with a `package-lock.json` comment out above and use below instead
# COPY package.json package-lock.json ./ 
# RUN npm ci

# Rebuild the source code only when needed
FROM node:alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

# Next.js collects completely anonymous telemetry data about general usage.
# Learn more here: https://nextjs.org/telemetry
# Uncomment the following line in case you want to disable telemetry during the build.
# ENV NEXT_TELEMETRY_DISABLED 1

RUN yarn build

# Production image, copy all the files and run next
FROM node:alpine AS runner
WORKDIR /app

ENV NODE_ENV production
# Uncomment the following line in case you want to disable telemetry during runtime.
# ENV NEXT_TELEMETRY_DISABLED 1

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

# You only need to copy next.config.js if you are NOT using the default configuration
# COPY --from=builder /app/next.config.js ./
COPY --from=builder /app/public ./public
COPY --from=builder /app/package.json ./package.json

# Automatically leverage output traces to reduce image size 
# https://nextjs.org/docs/advanced-features/output-file-tracing
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs

EXPOSE 3000

ENV PORT 3000

CMD ["node", "server.js"]



추가.dockerignore
Dockerfile
.dockerignore
node_modules
npm-debug.log
README.md
.next


저지르다 ;)

추가하기 위해 next.config.js 변경 standalone output

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  output: 'standalone'
}

module.exports = nextConfig


저지르다 ;)

자, 가이드Deploying to Cloud Run using Cloud Build에 따라 계속 배포를 설정해 보겠습니다.

API 활성화:


서비스 계정 권한:


프로젝트에 새 파일cloudbuild.yaml을 추가하고 지속적인 배포를 위한 템플릿을 채웁니다.

steps:
  # Build the container image
  - name: 'gcr.io/cloud-builders/docker'
    args: ['build', '-t', 'gcr.io/$PROJECT_ID/nextgcp:$COMMIT_SHA', '.']
  # Push the container image to Container Registry
  - name: 'gcr.io/cloud-builders/docker'
    args: ['push', 'gcr.io/$PROJECT_ID/nextgcp:$COMMIT_SHA']
  # Deploy container image to Cloud Run
  - name: 'gcr.io/google.com/cloudsdktool/cloud-sdk'
    entrypoint: gcloud
    args:
    - 'run'
    - 'deploy'
    - 'nextgcp'
    - '--image'
    - 'gcr.io/$PROJECT_ID/nextgcp:$COMMIT_SHA'
    - '--region'
    - 'europe-west6'
images:
  - 'gcr.io/$PROJECT_ID/nextgcp:$COMMIT_SHA


트리거 생성:





이전에 추가된 커밋cloudbuild.yaml 및 푸시를 통해 트리거 확인

슬프게도 빌드가 실패했습니다.


인터넷에서 확인했는데 트리거의 지역 설정 때문입니다. 전역으로 변경해 보겠습니다.


이제 모든 것이 좋습니다.



도메인을 추가해 보겠습니다.


어디서나 간단하게 할 수는 없는 것 같습니다. mapping domainseurope-west1 에서 지역을 cloudbuild.yaml 로 변경하고 커밋하고 빌드합니다.



이제 간단한 매핑을 추가할 수 있습니다.



www 레코드도 설정하는 것을 잊지 마십시오. sleep 28800 :


앱 URL 확인:


확인troubleshooting

권한 설정:



이제 더 좋습니다.




성공 !

두 번째는 쉬우며 처음에는 올바른 문서를 찾는 것이 약간 어렵습니다. 이제 당신은 그것을 가지고 있습니다 :)