Nginx 部署 Vue 指南

1. 引言

解决一下Nginx 部署 Vue的问题和介绍一下部署流程

2. 准备工作

2.1 安装 Node.js 和 Vue CLI

首先，确保你已经安装了 Node.js 和 npm。你可以从 Node.js 官网下载并安装最新版本的 Node.js。安装完成后，使用以下命令安装 Vue CLI：

复制代码

npm install -g @vue/cli

2.2 创建和构建 Vue 项目

如果你还没有 Vue 项目，可以使用 Vue CLI 创建一个新的项目：

复制代码

vue create my-vue-project

按照提示选择项目配置。创建完成后，进入项目目录并构建项目：

复制代码

cd my-vue-project
npm run build

这将生成一个 dist 目录，其中包含了所有静态文件。

3. 安装 Nginx

3.1 在 Ubuntu 上安装 Nginx

更新包列表并安装 Nginx：

复制代码

sudo apt update
sudo apt install nginx

3.2 在 CentOS 上安装 Nginx

启用 EPEL 仓库并安装 Nginx：

复制代码

sudo yum install epel-release
sudo yum install nginx

3.3 启动 Nginx 服务

安装完成后，启动 Nginx 服务并设置开机自启动：

复制代码

sudo systemctl start nginx
sudo systemctl enable nginx

4. 配置 Nginx

4.1 创建 Nginx 配置文件

在 Nginx 的配置目录中创建一个新的配置文件。例如，在 Ubuntu 上，配置文件通常位于 /etc/nginx/sites-available/ 目录中。

复制代码

sudo nano /etc/nginx/sites-available/vue_project

4.2 配置 Nginx 以服务 Vue 项目

在配置文件中添加以下内容：

复制代码

server {
    listen 80;
    server_name your_domain_or_ip;

    root /var/www/vue_project/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    # Optional: Enable gzip compression
    gzip on;
    gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;
    gzip_vary on;
    gzip_min_length 1024;
}

请将 your_domain_or_ip 替换为你的域名或服务器的 IP 地址，并将 /var/www/vue_project/dist 替换为你的 Vue 项目的构建目录路径。

4.3 启用配置

在 Ubuntu 上，创建一个符号链接以启用配置：

复制代码

sudo ln -s /etc/nginx/sites-available/vue_project /etc/nginx/sites-enabled/

4.4 测试 Nginx 配置

在重新加载 Nginx 之前，测试配置文件是否正确：

复制代码

sudo nginx -t

如果配置文件没有错误，重新加载 Nginx：

复制代码

sudo systemctl reload nginx

5. 部署 Vue 项目

将构建好的 Vue 项目文件复制到 Nginx 配置中指定的根目录。例如：

复制代码

sudo mkdir -p /var/www/vue_project/dist
sudo cp -r /path/to/your/vue_project/dist/* /var/www/vue_project/dist/

确保 Nginx 有权限访问这些文件：

复制代码

sudo chown -R www-data:www-data /var/www/vue_project/dist

6. 配置防火墙

如果你的服务器启用了防火墙，确保允许 HTTP 流量通过。以下是在 Ubuntu 上使用 UFW 的示例：

复制代码

sudo ufw allow 'Nginx Full'

7. 访问你的 Vue 应用

现在，你应该能够通过浏览器访问你的域名或 IP 地址来查看部署的 Vue 应用。

8. HTTPS 配置（可选）

为了提高安全性，建议为你的站点配置 HTTPS。你可以使用 Let's Encrypt 免费获取 SSL 证书。

8.1 安装 Certbot

确认 Certbot 已安装

通过运行以下命令来检查：

复制代码

certbot --version

在 Ubuntu 上：

复制代码

sudo apt install certbot python3-certbot-nginx

值得一提：

Certbot 默认将证书存储在 /etc/letsencrypt/live// 目录下。是你的域名。

8.2 获取 SSL 证书

运行以下命令以获取证书并自动配置 Nginx：

复制代码

sudo certbot --nginx -d your_domain_or_ip

按照提示完成证书获取和配置过程。

8.3 自动续期

Certbot 会自动配置证书续期。你可以通过以下命令手动测试续期：

复制代码

sudo certbot renew --dry-run

9. 步骤

9.1 准备 Vue 项目

安装 Node.js 和 Vue CLI。
创建并构建 Vue 项目。

9.2 安装 Nginx

在 Ubuntu 或 CentOS 上安装 Nginx。
启动并设置 Nginx 开机自启动。

9.3 配置 Nginx

创建 Nginx 配置文件。
配置 Nginx 以服务 Vue 项目。
启用并测试 Nginx 配置。

9.4 部署 Vue 项目

将构建好的 Vue 项目文件复制到 Nginx 根目录。
确保 Nginx 有权限访问这些文件。

9.5 配置防火墙

确保防火墙允许 HTTP 流量通过。

9.6 访问 Vue 应用

通过浏览器访问你的域名或 IP 地址。

9.7 HTTPS 配置（可选）

安装 Certbot。
获取并配置 SSL 证书。
配置证书自动续期。

10. 结论

但是因为环境或者其他的什么原因，每个人的部署情况可能都会不同，具体情况具体分析，欢迎大家分享自己遇到的问题。