我看到很多帖子描述了如何构建 vue 或 nuxt 应用程序并将它们部署在服务器上。不幸的是,这些帖子都没有展示如何使用 gitlab ci 和 nginx 来做到这一点。我试图在这里总结我的经历,希望能在我走过的坎坷道路上拯救别人。

---

准备

模具应用

首先,我们需要一个我们想要发布的 nuxt 应用程序。

我们可以使用终端命令相对轻松地创建这些。

npx create-nuxt-app my-website

Das 存储库

要使用 Gitlab 的 CI 流程,一个免费帐户就足够了,您可以在其中创建新的存储库或使用现有的存储库。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--E9X8RnPL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev. s3.amazonaws.com/i/3j0m2pr0yn2wf6x6qt8x.jpg)

如何创建一个新的可以阅读第页 https://docs.gitlab.com/ee/user/project/repository/#create-a-repository

完成此操作后,您必须存入私钥。 CI 需要它才能通过 rsync 传递数据。

您可以在此处了解如何创建密钥对。https://help.github.com/en/articles/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent#generating-a-new-ssh-key

在我的例子中,这个变量被称为 SSH_PRIVATE_KEY。我们稍后将在我们的配置中需要此指定

[](https://res.cloudinary.com/practicaldev/image/fetch/s--zf7V-K6P--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https:// thepracticaldev.s3.amazonaws.com/i/ix24yyppgtjru8gq3bj9.jpg)

然后,您必须将公钥存储在您的服务器上。 重要这里是key也分配给user,稍后将由nginx使用来传递页面。大多数情况下,这是 www-data 用户。

准备完成

我不必做更多,因为从现在开始它只取决于配置。

Gitlab CI

为了解决 Gitlab CI,我们需要在项目的根目录中创建一个文件。

该文件名为 .gitlab-ci.yaml。

一旦 Gitlab 识别出这个文件,CI Runner 就会激活并执行它包含的命令。

图片

我们定义的图像将用于所有没有明确图像的命令。我们使用节点映像,因为它拥有构建应用程序所需的一切。

image: node

变量

在这里我们定义了更多的变量,这样我们就不必一次又一次地输入它们,也可以在其他项目中使用我们的文件。

variables:
    RSYNC: rsync -rtqx --links --safe-links --chmod=Du=rwx,Dgo=rx,Fu=rw,Fog=r --delete

    PROD_URL: https://creativeworkspace.de/
    PROD_USER: web_www
    PROD_SERVER: 159.69.21.63
    PROD_PATH: /var/www/clients/client1/web1/web
    PROD_PORT: '22'

缓存

这样 gitlab 并不总是需要在阶段之间再次下载数据并且再次运行它会更快。让 gitlab 保存 node_modules 文件夹。在短时间内进行多次构建时,这为我们节省了大量时间。

cache:
    paths:
        - node_modules/

模具台

为了控制哪个 Gitlab 进程以哪个顺序执行,我们创建了 2 个阶段。

我们在 Gitlab CI 应该执行的任务中引用这些

stages:
    - build
    - deploy

任务

Gitlab 应该为我们做的第一个任务是构建应用程序。然后,我们将文件夹dist保存为工件,以便我们可以在第二步中部署它。

build:
    stage: build
    before_script:
        - npm install
    script:
        - NODE_ENV=production npm run build
        - NODE_ENV=production npm run generate
    environment:
        name: production
    artifacts:
        expire_in: 1 hour
        name: '${CI_COMMIT_REF_NAME}'
        paths:
            - dist/

接下来,Gitlab 应该为我们交付代码。

对于这一步,我现在使用另一个具有 RSYNC 组件的图像。

这里同时发生了很多事情。首先,我们将生成的 SSH 密钥添加到镜像中。然后我们在我们的服务器上运行一个 RSYNC。因此,我们在变量中指定的路径中拥有服务器上 *dist 文件夹的内容。

deploy:prod:
    stage: deploy
    image: 1drop/php-73-docker-utils
    environment:
        name: production
        url: https://creativeworkspace.de
    before_script:
        - eval $(ssh-agent -s)
        - echo "$SSH_PRIVATE_KEY" | tr -d '\r' | ssh-add - > /dev/null
        - mkdir -p ~/.ssh
        - echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config
        - cd dist/
    script:
        - $RSYNC -e "ssh -p $PROD_PORT" . $PROD_USER@$PROD_SERVER:$PROD_PATH
    only:
        - master

完成

从现在开始,我们只需要告诉我们的 nginx 它应该从这个目录传递数据就可以了:)