赞
踩
最近由于某个偶然的事件,突然对Docker、Github自动化部署产生了浓厚的兴趣,开始研究Docker部署Nextjs应用!
NextJS 是 vercel 创建的 JavaScript 框架。它允许你使用 React 构建无服务器 API、服务器端渲染和静态 Web 应用程序。 Vercel 提供与 GitHub、GitLab 和 BitHub 的开箱即用 CI/CD 集成。
但有时,我们希望将 NextJS 应用程序托管在 vercel 之外的其他平台上,例如 AWS、 Azure。
在本博客中,我们将了解如何使用 GitHub Workflow 和 Docker 构建 NextJS 应用程序。
NextJS 建议使用 create-next-app ,它会自动为你设置所有内容。要创建项目,请运行:
npx create-next-app
# or
yarn create next-app
安装完成后,按照说明启动开发服务器。尝试编辑 pages/index.js 并在浏览器上查看结果。
我们将把 NextJS 应用程序打包到 Docker 镜像中。使用 Docker 的原因是当我们想要运行 NextJS 服务器时,我们不需要安装任何额外的软件包,如 nodejs、pm2 等。
Docker 会将所有内容捆绑在一起,并为我们提供可以在任何地方运行的镜像。以下是我的 NextJS 应用程序的示例 Dockerfile。
FROM node:lts-alpine ENV NODE_ENV production ENV NPM_CONFIG_LOGLEVEL warn RUN mkdir /home/node/app/ && chown -R node:node /home/node/app WORKDIR /home/node/app COPY package.json package.json COPY package-lock.json package-lock.json USER node RUN npm install --production COPY --chown=node:node .next .next COPY --chown=node:node public public EXPOSE 3000 CMD npm start
现在,让我们逐步看看上面的 Dockerfile 中发生了什么。
我们可以看到,我们没有对 Dockerfile 进行任何更改。它很容易理解并且简单明了。有趣的部分是我们将 .next 和 public 文件夹复制到容器中,而不是在容器内构建。
这是详细的解释:
Workflow是由一个或多个作业组成的可配置自动化流程。我们将使用 YAML 文件配置工作流程。你可以在这里阅读更多。
下面是工作流程文件,我们将使用相同的。将此文件保存在 PROJECT_ROOT_FOLDER/.github/workflows/main.yml ,以便 GitHub 可以读取 yaml 文件并相应地设置操作。
name: Build & Publish on: push: branches: - "**" # all branches - "!dependabot/**" # exclude dependbot branches workflow_dispatch: # Manually run the workflow jobs: next-build: if: ${{ github.event_name == 'workflow_dispatch' }} # Run only if triggered manually runs-on: ubuntu-latest container: node:lts # Use node LTS container version, same as Dockerfile base image steps: - name: Checkout uses: actions/checkout@v2 # Checkout the code - run: npm ci #install dependencies - run: npm run build env: NEXT_PUBLIC_FIREBASE_API_KEY: ${{secrets.NEXT_PUBLIC_FIREBASE_API_KEY}} NEXT_PUBLIC_FIREBASE_APP_ID: ${{secrets.NEXT_PUBLIC_FIREBASE_APP_ID}} NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN: ${{secrets.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN}} NEXT_PUBLIC_FIREBASE_PROJECT_ID: ${{secrets.NEXT_PUBLIC_FIREBASE_PROJECT_ID}} NEXT_PUBLIC_SENTRY_DSN: ${{secrets.NEXT_PUBLIC_SENTRY_DSN}} - name: Upload Next build # Upload the artifact uses: actions/upload-artifact@v2 with: name: build path: | .next public retention-days: 7 # artifact retention duration, can be upto 30 days docker-push: needs: next-build # Job depends on next-build(above) job runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v2 - name: Download next build # Download the above uploaded artifact uses: actions/download-artifact@v2 with: name: build - name: Login to GitHub Container Registry uses: docker/login-action@v1 with: registry: ghcr.io username: ${{ github.repository_owner }} password: ${{ secrets.CR_PAT }} - name: Build and Push Docker Images run: | export CURRENT_BRANCH=${GITHUB_REF#refs/heads/} export TAG=$([[ $CURRENT_BRANCH == "main" ]] && echo "latest" || echo $CURRENT_BRANCH) export GITHUB_REF_IMAGE=ghcr.io/$GITHUB_REPOSITORY:$GITHUB_SHA export GITHUB_BRANCH_IMAGE=ghcr.io/$GITHUB_REPOSITORY:$TAG docker build -t $GCR_IMAGE -t $GITHUB_REF_IMAGE -t $GITHUB_BRANCH_IMAGE . echo "Pushing Image to GitHub Container Registry" docker push $GITHUB_REF_IMAGE docker push $GITHUB_BRANCH_IMAGE
现在,让我们讨论一下 yaml 文件中发生了什么。
要运行作业,我们必须导航到存储库操作,你将在左侧边栏上看到带有 Build & Push 的工作流程。单击该链接,你将看到如下屏幕。n
有了这个,我们将能够构建和打包我们的 NextJS 应用程序。你将在屏幕截图下方看到操作屏幕。
帮助链接:
https://dev.to/thakkaryash94/build-nextjs-application-using-github-workflow-and-docker-3foj
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。