Ubuntu 20.04使用Nginx部署Vuetify应用完整教程

...
<v-main>
    <v-container>
        <v-card elevation="0">
            <v-card-title>
            ...
            </v-card-title>
            <v-card-text>
              <v-timeline
                  v-if="tasks.length > 0"
                  dense
                >
                    <v-timeline-item
                        v-for="(t, index) in tasks"
                        :key="index"
                    >
                        <v-row class="display-1 text-capitalize">
                            <v-col cols="7">
                                {{ t }}
                            </v-col>
                            <v-col
                                class="text-right"
                                cols="5"
                            >
                            </v-col>
                        </v-row>
                     </v-timeline-item>
               </v-timeline>
             </v-card-text>
         </v-card>
     </v-container>
</v-main>
...

通过上面的代码，你增加了：

• 一个带有两个类的v-row组件，用于设置任务文本的大小（display-1，类似于HTML中的H1）并将所有字符转换为大写（text-capitalize）。
• 在行内添加了一个v-col组件，用于显示每个任务的名称，该组件需要占用7/12的空间（通过cols=”7″属性设置）。
• 另一个v-col组件用于放置删除按钮。它需要占用5/12的空间（通过cols=”5″属性设置），并且内部所有组件都通过text-right类设置为右对齐。

最后，是时候将removeTask函数附加到一个按钮组件上，使用v-btn组件。为了简化，你将使用一个图标按钮，即只有图标没有文本的按钮。为此，你还需要一个v-icon组件。

请加入被突出显示的行。这些代码将添加到你的Vuetify与Nginx应用程序的源代码文件App.vue中。

...
<v-timeline
    v-if="tasks.length > 0"
    dense
>
    <v-timeline-item
        v-for="(t, index) in tasks"
        :key="index"
    >
        <v-row class="display-1 text-capitalize">
            <v-col cols="7">
                {{ t }}
            </v-col>
            <v-col
                class="text-right"
                cols="5"
            >
                <v-btn
                    icon
                    @click="removeTask(index)"
                >
                    <v-icon color="red lighten-1" large>
                        mdi-sticker-remove
                    </v-icon>
                </v-btn>
            </v-col>
        </v-row>
    ...
    </v-timeline-item>
</v-timeline>

在您刚刚添加的代码中，v-btn组件的icon属性指定了不需要文本。它修改了组件，只对v-icon组件进行样式设置。

@click组件事件将您的removeTask方法绑定到按钮的点击事件上。因此，每当底层的按钮点击事件被触发时，您的方法将被调用。

您使用了v-for循环提供的索引作为removeTask方法的参数。

最后，v-icon的颜色将是红色lighten-1，大小将为大号，且您使用的是mdi-sticker-remove材料设计的图标。

现在您已经使用一些Vuetify组件更新了模板，并配置了它们以使用和显示数据模型的内容，同时还允许您的应用用户通过页面方法与它们进行交互。

这是App.vue文件的最终代码。

vuetify-meets-nginx-app/src/App.vue的中文翻译：
vuetify-meets-nginx-app/src/App.vue

<template>
    <v-app>
        <v-app-bar
            app
            color="primary"
            dark
        >
        <div class="d-flex align-center">
            <v-img
                alt="Vuetify Logo"
                class="shrink mr-2"
                contain
                src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
                transition="scale-transition"
                width="40"
            />

            <v-img
                alt="Vuetify Name"
                class="shrink mt-1 hidden-sm-and-down"
                contain
                min-width="100"
                src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png"
                width="100"
            />
        </div>

        <v-spacer></v-spacer>

        </v-app-bar>

        <v-main>
            <v-container>
                <v-card elevation="0">
                    <v-card-title>
                        <v-text-field
                            v-model="newTask"
                            label="任务名称"
                            prepend-icon="mdi-content-save"
                            clear-icon="mdi-close-circle"
                            clearable
                            filled
                            type="text"
                            @click:prepend="addNewTask"
                            @click:clear="clearNewTask"
                        ></v-text-field>
                    </v-card-title>
                    <v-card-text>
                        <v-timeline
                            v-if="tasks.length > 0"
                            dense
                        >
                            <v-timeline-item
                                v-for="(t, index) in tasks"
                                :key="index"
                            >
                                <v-row class="display-1 text-capitalize">
                                    <v-col cols="7">
                                        {{ t }}
                                    </v-col>
                                    <v-col
                                        class="text-right"
                                        cols="5"
                                    >
                                        <v-btn
                                            icon
                                            @click="removeTask(index)"
                                        >
                                            <v-icon color="red lighten-1" large>
                                                mdi-sticker-remove
                                            </v-icon>
                                        </v-btn>
                                    </v-col>
                                </v-row>
                            </v-timeline-item>
                        </v-timeline>
                    </v-card-text>
                </v-card>
            </v-container>
        </v-main>
    </v-app>
</template>

<script>

export default {
    name: 'App',

    data: () => ({
        tasks: ['任务 1', '任务 2', '任务 3'],
        newTask: null
    }),
    methods: {
        addNewTask() {
            this.tasks.push(this.newTask);
            this.clearNewTask();
        },
        clearNewTask() {
            this.newTask = '';
        },
        removeTask(i) {
            this.tasks.splice(i, 1);
        }
    }
};
</script>

保存并关闭你的文件。

如果你的开发服务器还没有运行，请重新启动它。

1. npm run serve

现在你可以导航到 localhost:8080 来查看你的应用程序运行。

在这个步骤中，您创建了一个待办事项应用程序。您增加了功能并更新了用户界面。现在，您已经完成了该应用程序的编写，可以生成一个适用于生产环境的版本。下一步是为生产环境构建该应用程序。

第四步 — 将您的应用程序进行生产环境编译

在之前的步骤中，您已经编写了待办事项应用程序。但在使用Nginx发布之前，您需要为应用程序做好生产环境准备。这一步骤称为构建应用程序。

构建步骤将应用程序转换为浏览器可读取的内容。如果您尝试在浏览器中直接打开您的源文件，您将看不到任何内容。这是因为它们是Vue.js文件，而不是浏览器可以直接读取的HTML、JS和CSS文件。在使用Nginx发布您的应用程序之前，您需要将应用程序构建为生产环境版本，这就是您在此步骤中要做的事情。

您可以使用构建命令来自动完成此操作。package.json 是您应用程序的主要配置文件。它包含有关依赖项和可运行或构建应用程序的命令的信息，例如构建命令，如下所示：

{
  ...
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  ...
}

关于package.json文件配置的更多详情，请查阅package.json指南。

要开始构建过程，请使用CTRL+C停止开发服务器。

在同一个终端中，切换到项目目录。

1. cd vuetify-meets-nginx-app

执行构建命令：

1. npm run build

当构建完成后，您将在 dist 目录中拥有一个可供生产使用的应用程序版本。

接下来，您将设置Nginx作为反向代理来部署和访问应用程序。

第五步 – 将Nginx配置为反向代理

现在您已经有了一个可工作的应用程序，您必须将Nginx配置为反向代理，以提供您的应用程序文件并将其与您的域名连接起来。

反向代理是运行在服务器上的应用程序或服务，它可以将外部请求转发到另一个位置。在您的情况下，每当用户在浏览器中访问您的域名时，Nginx会通过返回来自您的应用程序的文件来处理该请求。它会返回文件，因为当您构建应用程序时，会生成HTML、JS和CSS文件，Nginx会将其视为服务器上的其他静态文件或网站来处理。

Nginx与站点配合工作。每个站点都是在一个单独的文件中配置的不同网站。所有的配置文件默认放在 /etc/nginx/sites-available/ 目录中。前往该目录。

1. cd /etc/nginx/sites-available/

创建一个名为vuetify-meets-nginx-app的文件。

1. sudo nano vuetify-meets-nginx-app

server {
  listen 80;
  listen [::]:80;
  server_name your_domain;
  autoindex on;
  root   /home/sammy/vuetify-meets-nginx-app/dist/;
  index  index.html;
}

在本教程中，您正在配置Nginx监听80端口，但您可以使用任何您想要的端口。将your_domain替换为您的域名。如果您正在本地开发环境中进行测试，您也可以使用服务器的IP地址或localhost。

通过根目录行，您告诉 Nginx 所有文件都位于 /home/sammy/vuetify-meets-nginx-app/dist/ 目录中，该目录在前一步骤中创建。最后，通过索引行，您告诉 Nginx 主文件是 index.html。

保存并关闭您的文件。

接下来，您需要解决Nginx配置文件中的权限问题。

Nginx是在您的服务器上运行的服务。您可以使用以下命令列出所有与Nginx相关的运行进程。

1. ps -fea | grep nginx

使用带有-fae选项的ps命令以完整格式列出所有当前的进程。然后将该命令的输出进行过滤，仅列出与nginx匹配的进程。

输出的结果将类似于以下内容：

root 39922 1 0 Jul14 ? 00:00:00 nginx: master process /usr/sbin/nginx -g daemon on; master_process on; www-data 39923 39922 0 Jul14 ? 00:00:01 nginx: worker process sammy 117909 117434 0 21:27 pts/0 00:00:00 grep --color=auto nginx

如图所示，nginx服务正以www-data用户运行。

接下来，使用这个命令查看/home/sammy/vuetify-meets-nginx-app/dist/的权限：

1. ls -l /home/sammy/vuetify-meets-nginx-app/dist/

输出将与以下类似：

total 20 drwxrwxr-x 2 sammy sammy 4096 Jul 14 18:54 css -rw-rw-r– 1 sammy sammy 4286 Jul 14 18:54 favicon.ico -rw-rw-r– 1 sammy sammy 853 Jul 14 18:54 index.html drwxrwxr-x 2 sammy sammy 4096 Jul 14 18:54 js

所有的文件和文件夹都具有对用户”Sammy”开放的权限。如果你配置Nginx来读取这些文件，由于Nginx用户”www-data”没有执行权限，这将无法工作。

解决此问题有几个选择:

• 授予Nginx对dist文件夹的读、写和执行权限。然而，授予一个可从整个网络访问的服务读取本地用户文件的权限是不安全的。此外，Nginx将需要访问所有父文件夹的权限，因为它需要导航到最终文件夹，这基本上会将/home目录向全世界开放。不推荐此方法。
• 使用sudo运行nginx。这也不安全，因为现在你将拥有一个可以访问服务器上所有文件的服务。
• 将你的dist内容移动到只有Nginx可以访问而其他用户无法访问的位置。这是最安全的选项。

在本教程中，您将使用第三个选项。

在Ubuntu和一些其他基于Linux的发行版中，服务之间用于交换文件的共享位置是/var路径。您将把文件复制到/var/www，这是Nginx用于网站的默认路径。

从您的项目目录中运行以下命令，将您的文件复制到/var/www路径中。

1. sudo cp -r /home/sammy/vuetify-meets-nginx-app/dist /var/www/vuetify-meets-nginx-app

复制所有文件时将保持与之前相同的权限，即为sammy用户的权限，因此您需要将sammy用户添加到与www-data相同的权限组中。您可以使用以下命令来实现此操作：

1. sudo usermod -aG www-data sammy

目前，Nginx可以以安全方式访问所需的文件。然而，每当生成新版本的应用程序时，您都需要复制项目文件，这可能会增加自动部署、CI/CD工具等的复杂性。更好的解决方案是修改构建命令，直接在正确的路径生成文件。

要做到这一点，打开 package.json 进行编辑，并添加加亮的文本。

...
"build": "vue-cli-service build --dest /var/www/vuetify-meets-nginx-app",
...

保存并关闭文件。

现在你可以完成Nginx的配置了。打开Nginx配置文件并将其更新为新的应用程序路径。

server {
  listen 80;
  listen [::]:80;
  server_name your_domain OR your_server_IP;
  autoindex on;
  root   /var/www/vuetify-meets-nginx-app;
  index  index.html;
}

保存并关闭你的文件。

现在你的网站文件准备好了，你需要启用它。为此，请转到启用的网站路径：

1. cd /etc/nginx/sites-enabled/

禁用默认网站以确保您不会在同一端口（端口80）上启用和监听两个网站。

1. sudo rm default

最后，创建一个符号链接文件到你的应用配置文件。

1. sudo ln -s /etc/nginx/sites-available/vuetify-meets-nginx-app

Nginx只会考虑放置在启用目录中的站点文件。您可以直接复制配置文件，但不建议重复文件，因为可能会出现不一致。这就是为什么符号链接（可用文件的文件快捷方式）是更好的方法。

测试以确保您的Nginx文件中没有语法错误。

1. sudo nginx -t

你的输出将会像这样：

nginx: 配置文件 /etc/nginx/nginx.conf 语法正确 nginx: 配置文件 /etc/nginx/nginx.conf 测试成功

为应用更改，请重新启动Nginx服务。

1. sudo systemctl restart nginx

现在，您可以通过导航到您的域名（或者您服务器的IP地址）来查看您的待办应用程序已经准备好并且已发布。

在这一步中，你将Nginx配置为反向代理以发布你的应用程序。

结论

在本教程中，你创建了一个Vue.js应用程序并安装和配置了Vuetify框架。然后，你生成了一个静态版本的应用程序，准备上线生产环境，并最后配置了Nginx服务以发布应用。

想要更详细地了解项目文件，请查看Github仓库。

作为下一步，请尝试配置Nginx以通过HTTPS提供您的应用程序。要开始，请遵循我们的教程《如何在Ubuntu 20.04上使用Let’s Encrypt保护Nginx》。

要了解更多关于 Vuetify 的内容，请查阅 Vuetify 文档。如果你有兴趣扩展 Vuetify 组件的功能，请查看我们的教程《扩展 Vuetify 表单字段验证》。