서버리스 컨테이너와 서버리스 Next.js SSR GCP Cloud Run 비교
10487 단어 googlecloudnextjsreactcontainers
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
그런 다음 클라우드 IDE에서 폴더를 열 수 있으며 다음이 있어야 합니다.

Dockerfile
에 multi stage build을 추가합니다. 는 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 domains을 참조하십시오.europe-west1
에서 영역을 cloudbuild.yaml
로 변경, 커밋, 빌드:

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



www
레코드도 설정해야 합니다. sleep 28800 :

앱 URL 확인 중:

확인 중 troubleshooting
권한 설정 :


이제 더 나아졌습니다.


성공 !
두 번째는 쉽고 처음에는 올바른 문서를 찾는 것이 약간 어렵습니다. 이제 당신은 그것을 가지고 :)
Reference
이 문제에 관하여(서버리스 컨테이너와 서버리스 Next.js SSR GCP Cloud Run 비교), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/hexfloor/serverless-containers-vs-containerless-nextjs-ssr-gcp-cloud-run-4dgk
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
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
Reference
이 문제에 관하여(서버리스 컨테이너와 서버리스 Next.js SSR GCP Cloud Run 비교), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/hexfloor/serverless-containers-vs-containerless-nextjs-ssr-gcp-cloud-run-4dgk텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)