Бессерверные контейнеры против бессерверного Next.js SSR GCP Cloud Run

Шаг 0: проверьте сводку

GCP Cloud Run

Я вдохновился руководством Geshan Manandhar, там меньше примеров того, как это работает, но это руководство может быть одним из лучших во вселенной на эту тему 🙂

Первое, что вам нужно сделать, это создать новый проект:

Затем перейдите в облако исходников
и создайте репозиторий:

Теперь давайте просто перейдем к облаку ide, так как оно потрясающее и уже настроено, в противном случае вам нужно настроить gcloud CLI локально.

На странице репозитория я просто проверяю, как клонировать репозиторий с помощью gcloud :

И сделать это в облачной оболочке, доступной в облачном идеале:

git config --global user.email "youremail@gmail.com"
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
Войти в полноэкранный режим Выйти из полноэкранного режима

После этого вы можете открыть папку в cloud ide и у вас должно получиться вот это:

Добавление Dockerfile с многоступенчатой сборкой. Существует ограничение на скорость загрузки docker hub, поэтому нам может понадобиться использовать 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
Вход в полноэкранный режим Выход из полноэкранного режима

commit 😉

Изменение next.config.js для добавления автономного вывода

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

module.exports = nextConfig
Войти в полноэкранный режим Выйти из полноэкранного режима

commit 😉

Итак, давайте настроим непрерывное развертывание, следуя руководству 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 и push для проверки триггера.

К сожалению, сборка не удалась:

Я проверил в интернете, это связано с настройкой региона в триггере, давайте изменим его на глобальный:

Теперь все в порядке:

Давайте добавим домен:

Похоже, мы не можем сделать это просто везде, смотрите отображение доменов.
Меняем регион на europe-west1 в cloudbuild.yaml, фиксируем, строим:

Теперь мы можем добавить простое отображение:


Не забудьте также установить записи www, sleep 28800 :

Проверяем url приложения :

Проверка устранения неполадок

Установка разрешений :

Теперь лучше :

Успех!

Во второй раз это легко и просто, в первый раз было немного сложно найти правильный документ. Теперь он у вас есть 🙂

Оцените статью
devanswers.ru
Добавить комментарий