
서버리스 컨테이너와 서버리스 Next.js SSR GCP Cloud Run
2022-10-13 last update
11 minutes reading googlecloud nextjs react containers0단계: 확인
GCP 클라우드 런
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
권한 설정:


이제 더 좋습니다.


성공 !
두 번째는 쉬우며 처음에는 올바른 문서를 찾는 것이 약간 어렵습니다. 이제 당신은 그것을 가지고 있습니다 :)
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
# 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"]
Dockerfile
.dockerignore
node_modules
npm-debug.log
README.md
.next
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
output: 'standalone'
}
module.exports = nextConfig
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