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 项目
  1. 安装 Node.js 和 Vue CLI。
  2. 创建并构建 Vue 项目。
9.2 安装 Nginx
  1. 在 Ubuntu 或 CentOS 上安装 Nginx。
  2. 启动并设置 Nginx 开机自启动。
9.3 配置 Nginx
  1. 创建 Nginx 配置文件。
  2. 配置 Nginx 以服务 Vue 项目。
  3. 启用并测试 Nginx 配置。
9.4 部署 Vue 项目
  1. 将构建好的 Vue 项目文件复制到 Nginx 根目录。
  2. 确保 Nginx 有权限访问这些文件。
9.5 配置防火墙
  1. 确保防火墙允许 HTTP 流量通过。
9.6 访问 Vue 应用
  1. 通过浏览器访问你的域名或 IP 地址。
9.7 HTTPS 配置(可选)
  1. 安装 Certbot。
  2. 获取并配置 SSL 证书。
  3. 配置证书自动续期。

10. 结论

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

相关推荐
一心0926 小时前
ubuntu 20.04.6 sudo 源码包在线升级到1.9.17p1
运维·ubuntu·sudo·漏洞升级
好好学习啊天天向上6 小时前
世上最全:ubuntu 上及天河超算上源码编译llvm遇到的坑,cmake,ninja完整过程
linux·运维·ubuntu·自动性能优化
你想考研啊6 小时前
三、jenkins使用tomcat部署项目
运维·tomcat·jenkins
代码老y7 小时前
Docker:容器化技术的基石与实践指南
运维·docker·容器
典学长编程7 小时前
Linux操作系统从入门到精通!第二天(命令行)
linux·运维·chrome
DuelCode8 小时前
Windows VMWare Centos Docker部署Springboot 应用实现文件上传返回文件http链接
java·spring boot·mysql·nginx·docker·centos·mybatis
幽络源小助理8 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
你想考研啊10 小时前
四、jenkins自动构建和设置邮箱
运维·jenkins
Code blocks10 小时前
使用Jenkins完成springboot项目快速更新
java·运维·spring boot·后端·jenkins
鱼樱前端11 小时前
今天介绍下最新更新的Vite7
前端·vue.js