如何在Google Cloud Run上部署Next.js

Next.js是一个流行的React框架，它填补了典型React库的缺失，使其成为一个熟练的全栈框架。在这篇文章中，我们将使用一个服务器端渲染（SSR）的Next.js例子，并通过点击按钮将其部署在Google Cloud Run上。

什么是Next.js？

Next.js是一个建立在超流行的React库之上的框架，允许开发者用全栈框架轻松创建网站。它被戏称为 "用于生产的React框架"，具有很好的开发者体验。

Next.js提供了对Typescript的支持，可以选择静态网站生成（SSG）或服务器端渲染（SSR），对SEO友好，并提供了很好的图像优化，开箱即用。这些特点使其成为前端开发社区中最受欢迎的React框架之一。

SSR的好处

服务器端渲染（SSR）的主要明显好处是，每个页面都有一个静态的URL，而且因为内容是在服务器上预先生成的，所以对SEO友好。如果你的应用程序中的数据经常变化，或根据权限或哪个用户登录而动态生成，那么服务器端渲染就非常有用。

服务器端渲染的另一个重要好处是，内容始终是动态的，因为HTML是在每次请求时渲染的。在本教程中，记住这一点很重要，因为我们将托管一个Next.js的全栈实例（它有一个模拟的API），API的响应在前端呈现。

这让我们看到了托管API或任何其他网络应用的最佳选择之一。Google Cloud Run。

什么是Google Cloud Run？

Google Cloud Run可以说是以真正的无服务器方式运行容器的最佳完全管理服务。我们可以部署和扩展到数百个容器，而不需要写一行YAML或了解Kubernetes和Knative。

使用Google Cloud Run，我们可以通过无服务器容器从无到有，从有到优，而且最重要的是，它是免费的。

接下来我们将运行Next.js的API示例，并将其Docker化。

前提条件

在我们开始钻研代码之前，请确保你具备这些先决条件。

• 在你的本地机器上运行带有NPM和NPX的Node.js
• 对Git和GitHub的工作知识
• 对Next.js的工作知识
• 对Docker和Docker Compose有一定了解（强烈建议阅读Docker与Node.js的帖子）
• 对Docker中的BuildKit功能有一定了解
• 一个谷歌云平台（GCP）账户。如果你还没有，你可以在这里免费试用。

现在让我们来看看一些代码样本。

构建一个Next.js应用实例

Next.js在Github资源库的examples文件夹里有270多个例子。我们将使用这个API-routes例子，它有列出星球大战人物及其各种特征的API。然后我们将进行Dockerize，这样就可以更容易地部署到Google Cloud Run。让我们开始吧!

为了得到Next.js API路线的例子，我们将运行以下程序。

npx create-next-app --example api-routes api-routes-app

这将需要几分钟的时间来下载并在api-routes-app 文件夹中设置API路由示例。

当它完成后，我们应该看到类似下面的屏幕截图。

之后，我们可以用下面的方法检查它在本地的运行情况。

cd api-routes-app
npm run dev

然后，我们可以在我们最喜欢的浏览器上检查输出，网址是 [http://localhost:3000](http://localhost:3000)，它看起来会像这样。

如果我们点击其中一个名字，它将给出关于该字符的某些细节。它通过一个简单的API运行，可以通过以下网址访问 [http://localhost:3000/api/people](http://localhost:3000/api/people)产生如下的JSON格式。

你可以继续阅读例子中的代码，了解它是如何工作的。

Dockerizing Next.js 示例应用程序

为了Dockerize这个Next.js API示例应用程序，我们将添加一个新的Docker文件，内容如下。

# Get NPM packages
FROM node:14-alpine AS dependencies
RUN apk add --no-cache libc6-compat
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm ci --only=production

# Rebuild the source code only when needed
FROM node:14-alpine AS builder
WORKDIR /app
COPY . .
COPY --from=dependencies /app/node_modules ./node_modules
RUN npm run build

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

ENV NODE_ENV production

RUN addgroup -g 1001 -S nodejs
RUN adduser -S nextjs -u 1001

COPY --from=builder --chown=nextjs:nodejs /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json

USER nextjs
EXPOSE 3000

CMD ["npm", "start"]

这是一个多阶段的Docker文件。第一阶段是一个依赖项，运行npm ci ，以获得所有的npm包。

第二阶段是一个构建器，运行npm run build 来构建Next.js应用程序。

最后一个阶段是运行器阶段，我们从之前的构建器阶段复制应用程序及其依赖项，并将其与NODE_ENV 作为生产运行。

因此，我们将添加一个Docker-compose.yml 文件，以方便构建我们的Docker容器。它将看起来像下面的代码。

version: '3'
services:
  app:
    build:
      context: ./
    volumes:
      - .:/app
    ports:
      - "3000:3000"

在这个Docker-compose 文件中，我们正在构建应用程序并将项目的本地根映射到容器内的/app 。然后我们将容器的3000端口暴露给本地3000端口。

为了更快地构建Docker，我们将使用Docker的BuildKit功能。为了在打开BuildKit功能的情况下构建容器，我们将运行以下命令。

COMPOSE_DOCKER_CLI_BUILD=1 DOCKER_BUILDKIT=1 docker-compose build

它将为我们提供下面的截图中的输出。

要在本地运行该应用来测试它，我们可以运行。

docker-compose up

它将会给我们显示类似下面的内容。

现在，如果我们转到 [http://localhost:3000](http://localhost:3000)它将显示我们在上一步看到的同样的人员名单输出。

在这一点上，如果你有兴趣，我建议阅读更多关于Node.js和Docker的内容。

祝贺你!你已经成功地将一个Next.js应用程序Docker化了。

为Google Cloud Run做准备

为了将代码部署到Google Cloud Run，我们将使用方便的Cloud Run按钮。为了使用这个神奇的按钮，我们将把以下两行粘贴到readme.md 。

## Deploy to Google Cloud Run

[![Run on Google Cloud](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e85d36a5eb5f4ef1b747fcf02baac06d~tplv-k3u1fbpfcp-zoom-1.image)](https://deploy.cloud.run)

然后我们将在根目录下创建一个新的app.json 文件，如下所示。

{
  "name": "nextjs",
  "options": {
    "allow-unauthenticated": true,
    "memory": "256Mi",
    "cpu": "1",
    "port": 3000,
    "http2": false
  }
}

默认情况下，Cloud Run希望应用程序在8080端口运行，所以这个app.json 文件告诉Cloud Run在3000端口监听，而不是默认的。

此外，它还指示云端运行打开应用程序供公众访问，并将allow-unauthenticated 设置为true 。然后，它被指示为每个容器使用1个CPU和256MB的内存。

最后，它告诉Cloud Run不要为这个服务使用HTTP2。

将代码推送到GitHub

我们需要将代码推送到GitHub，以便更容易部署应用程序。要做到这一点，我们将创建一个新的仓库，就像下面的截图中看到的那样。

然后我们将在项目的根目录下运行以下命令。

git remote add origin git@github.com:geshan/nextjs-cloud-run.git #replace with your repo URL
git add .
git commit -m "next.js full application with cloud run config"
git push -u origin main

随后，我们将进入版本库的根目录，点击蓝色的大按钮，如下图所示，上面写着在谷歌云上运行。

这将把我们带到谷歌云控制台，在那里我们需要授权脚本来部署我们的应用程序，看起来就像下面的gif。

我们还需要在上述过程中选择项目和地区。

Docker构建需要几分钟的时间，但我们的Next.js应用程序只需点击一个按钮就可以部署到谷歌云上运行。

当部署完成后，它应该是如下样子，我们得到一个以run.app 结尾的URL到我们的服务。

之后，如果我们点击上图中绿色的URL，就会看到我们的演示Next.js应用程序在Google Cloud Run上工作，如下图所示。

如果你只想从我的Github仓库部署，你也可以这样做。

好啊！我们有了Next.js的例子。我们的Next.js示例应用程序在Google Cloud Run上运行良好。

接下来的步骤

这是一个快速而简单的方法，可以在Google Cloud Run上开始使用Next.js的副业项目。

如果是一个团队项目，我建议探索Google Cloud Build、Google Container Registry，以及如何将这些服务结合起来，为Google Cloud Run创建一个强大的CI/CD管道。

你也可以看看这个云构建YAML指令文件，它只有三个步骤，可以将构建的容器部署到Google Cloud Run。如果你喜欢持续部署，也可以从用户界面上实现类似的功能。

总结

我们已经看到了如何在一个高度可扩展且具有最佳成本效益的服务上部署一个具有服务器端渲染组件的Next.js应用程序。Google Cloud Run。Cloud Run不仅对开发者超级友好，而且也是现代的、无服务器的。享受在无服务器容器上运行Next.js吧

The postHow to deploy Next.js on Google Cloud Runappeared first onLogRocket Blog.