使用 GitHub Actions 在 AWS 上进行 Next.js CI/CD

在本文中，您将学习如何使用 GitHub Actions 和无服务器框架在 AWS 上使用 Next.js 设置 CI/CD。

点击此处观看视频演示。

点击此处查看已完成的示例项目。

入门

首先，创建一个新的 GitHub 存储库。

为了使 GitHub Action 正常工作，它需要能够读取你将用于部署应用的 IAM 用户的aws-access-key-id信息aws-secret-access-key。要进行设置，请点击“设置” ，然后点击“机密”。

在这里，创建两个变量，一个名为AWS_KEY，一个名为AWS_SECRET。

IAM 用户应具有 AdministratorAccess 权限或此处所列的配置权限。如需观看创建 IAM 角色的视频演示，请点击此处。

使用以下方式创建一个新的 Next.js 应用程序npx并切换到新目录：

npx create-next-app my-next-app
cd my-next-app

使用您之前创建的 GitHub 存储库的唯一地址，通过 URI 在本地配置 Git。

git remote add origin git@github.com:git-username/project-name.git

我们将使用无服务器 Next.js 组件将 Next.js 应用程序部署到 AWS 。

为了实现此功能，请在项目根目录中创建一个名为serverless.yml的新文件并添加以下代码：

nextApp:
  component: "@sls-next/serverless-component@1.18.0"

接下来，在 Next.js 项目中创建一个名为.github的新文件夹，并在新文件夹中创建一个名为workflows的文件夹。

在工作流文件夹中，创建一个名为main.yml的新文件并添加以下代码：

	# .github/workflows/main.yml
	name: CI
	on:
	push:
	branches: [ main ]
	pull_request:
	branches: [ main ]
	workflow_dispatch:
	jobs:
	build:
	runs-on: ubuntu-latest
	steps:
	- uses: actions/checkout@v1
	- uses: actions/setup-node@v1
	with:
	node-version: '12.x'
	- name: Install NPM dependencies
	run: npm install
	- name: Configure AWS Credentials
	uses: aws-actions/configure-aws-credentials@v1
	with:
	aws-access-key-id: ${{ secrets.AWS_KEY }}
	aws-secret-access-key: ${{ secrets.AWS_SECRET }}
	aws-region: us-east-1
	- name: Deploy Next.js app
	run: npx serverless

view raw main.yml hosted with ❤ by GitHub

	# .github/workflows/main.yml
	name: CI
	on:
	push:
	branches: [ main ]
	pull_request:
	branches: [ main ]
	workflow_dispatch:
	jobs:
	build:
	runs-on: ubuntu-latest
	steps:
	- uses: actions/checkout@v1
	- uses: actions/setup-node@v1
	with:
	node-version: '12.x'
	- name: Install NPM dependencies
	run: npm install
	- name: Configure AWS Credentials
	uses: aws-actions/configure-aws-credentials@v1
	with:
	aws-access-key-id: ${{ secrets.AWS_KEY }}
	aws-secret-access-key: ${{ secrets.AWS_SECRET }}
	aws-region: us-east-1
	- name: Deploy Next.js app
	run: npx serverless

view raw main.yml hosted with ❤ by GitHub

现在我们将部署该应用。应用部署完成后，我们将使用 GitHub 操作触发新的部署。

npx serverless

部署完成后，CLI 应打印出应用程序 URL 以及有关部署的其他信息：

接下来，我们将提交代码并推送到 GitHub。部署此代码后，我们应该看到 GitHub 操作的处理过程：

git add .
git commit -m 'initial commit'
git push origin main

在您的 GitHub 存储库中，单击“操作”以查看正在进行的部署。

您的 CI/CD 流水线现在应该已成功设置！当您推送新代码时，您也应该会看到构建正在进行。

如果您向主分支设置了拉取请求，则还应该启动新的构建。