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

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


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

Dockerfilemulti 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

권한 설정 :



이제 더 나아졌습니다.




성공 !

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

좋은 웹페이지 즐겨찾기