利用 Nginx 部署前端 Vue 项目

打印 上一主题 下一主题

主题 676|帖子 676|积分 2028

在这篇文章中,我们将深入探究怎样利用 Nginx 部署一个 Vue.js 前端项目。Vue 是一个流行的前端 JavaScript 框架,而 Nginx 则是一个性能卓越的 Web 服务器和反向代理服务器。通过将这两者结合起来,我们可以高效地托管我们的前端应用。
一、情况预备

在开始部署之前,我们须要确保我们的情况中已安装以下软件:

  • Node.js 和 npm:用于构建 Vue 项目。
  • Vue CLI:用于快速创建 Vue 项目。
  • Nginx:用于托管静态文件。
1.1 安装 Node.js 和 npm

可以通过 Node.js 的官方网站下载最新版本的 Node.js(包括 npm)。安装完成后,利用以下命令查抄安装情况:
  1. node -v
  2. npm -v
复制代码
1.2 安装 Vue CLI

通过 npm 全局安装 Vue CLI:
  1. npm install -g @vue/cli
复制代码
安装完成后,利用以下命令查抄安装情况:
  1. vue --version
复制代码
1.3 安装 Nginx

在 Ubuntu 和 Debian 体系上,利用以下命令安装 Nginx:
  1. sudo apt update
  2. sudo apt install nginx
复制代码
在 CentOS 上,你可以利用以下命令安装:
  1. sudo yum install epel-release
  2. sudo yum install nginx
复制代码
安装后,利用以下命令启动 Nginx:
  1. sudo systemctl start nginx
复制代码
二、创建 Vue 项目

接下来,我们利用 Vue CLI 创建一个新的 Vue 项目。
2.1 创建项目

通过以下命令创建一个新的 Vue 项目:
  1. vue create my-vue-app
复制代码
在提示中选择你想要的配置(例如选择默认预设)。
2.2 进入项目目录

  1. cd my-vue-app
复制代码
2.3 启动开发服务器

可以通过以下命令启动开发服务器,查抄项目是否正常工作:
  1. npm run serve
复制代码
打开浏览器并访问 http://localhost:8080,你应该可以看到 Vue 示例项目的欢迎页面。
三、构建 Vue 项目

在接下来的步骤中,我们须要将 Vue 项目构建为可以由 Nginx 提供的静态文件。
3.1 构建项目

运行以下命令举行构建:
  1. npm run build
复制代码
构建完成后,Vue 项目的生成文件将生成在 dist 文件夹中。
3.2 查看生成的文件

进入 dist 目录,你应该会看到包罗 index.html 和其他静态资源(如 CSS 和 JS 文件)的文件。
  1. cd dist
  2. ls
复制代码
确保文件在这里,并记住此路径,因为我们将在 Nginx 配置中利用它。
四、配置 Nginx

如今,我们须要配置 Nginx 以提供我们的 Vue 应用。
4.1 创建 Nginx 配置文件

创建一个新的 Nginx 配置文件,可以在 /etc/nginx/sites-available/ 目录下创建一个名为 my-vue-app 的文件。
  1. sudo nano /etc/nginx/sites-available/my-vue-app
复制代码
将以下配置复制并粘贴到文件中:
  1. server {
  2. listen 80;
  3. server_name yourdomain.com; # 将 "yourdomain.com" 替换为你的域名或者服务器 IP
  4. location / {
  5. root /path/to/your/dist; # 将此处的路径更改为 "dist" 文件夹的实际路径
  6. try_files $uri $uri/ /index.html;
  7. }
  8. error_page 404 /404.html;
  9. location = /404.html {
  10. internal;
  11. }
  12. }
复制代码
注意:


  • server_name:更换为你的域名或服务器 IP 地址。
  • root:更换为你 dist 文件夹的绝对路径,例如 /var/www/my-vue-app/dist。
4.2 启用配置文件

创建一个符号链接将此配置文件链接到 sites-enabled 目录中:
  1. sudo ln -s /etc/nginx/sites-available/my-vue-app /etc/nginx/sites-enabled/
复制代码
4.3 测试 Nginx 配置

在重新加载 Nginx 之前,建议先测试配置文件是否存在错误:
  1. sudo nginx -t
复制代码
如果看到 syntax is ok 和 test is successful,那么可以重新加载 Nginx。
4.4 重新加载 Nginx

运行以下命令以重新加载 Nginx:
  1. sudo systemctl reload nginx
复制代码
五、访问你的 Vue 应用

5.1 测试访问

在浏览器中访问你的域名或 IP 地址,例如 http://yourdomain.com。你应该能够看到你的 Vue 应用正常运行。
六、处置惩罚路由题目(如果利用了 Vue Router)

如果你的 Vue 应用利用了 Vue Router 的汗青模式,可能会遇到革新页面时 404 错误。为相识决这个题目,我们必须在 Nginx 配置中添加一个额外的规则。
在 location / 部分,确保有以下 try_files 行:
  1. try_files $uri $uri/ /index.html;
复制代码
这将确保所有请求都回退到 index.html,从而支持 Vue Router 的汗青模式。
七、日志与题目排查

7.1 日志文件位置

Nginx 的错误日志和访问日志默认生存在以下文件中:


  • 错误日志: /var/log/nginx/error.log
  • 访问日志: /var/log/nginx/access.log
你可以利用以下命令查看日志:
  1. tail -f /var/log/nginx/error.log
  2. tail -f /var/log/nginx/access.log
复制代码
7.2 常见题目排查

1. 无法访问页面


  • 查抄 Nginx 是否正在运行:sudo systemctl status nginx
  • 查抄你的域名是否解析到服务器 IP。
2. 404 错误


  • 确认 try_files 行的配置是否精确。
  • 确保 Vue 应用的构建文件存在于 dist 目录下。
3. Nginx 配置错误


  • 确认修改的配置文件(/etc/nginx/sites-available/my-vue-app)是否存在语法错误,可以运行 sudo nginx -t
     举行查找。
八、后续步骤

8.1 HTTPS 配置

为确保数据传输的安全性,建议为你的网站配置 HTTPS。你可以利用 Certbot 来自动为你的域名获取免费的 Let’s Encrypt 证书。
在 Ubuntu 上,可以利用以下命令安装 Certbot:
  1. sudo apt install certbot python3-certbot-nginx
复制代码
然后运行以下命令获取证书:
  1. sudo certbot --nginx
复制代码
依照提示完成配置。Certbot 将自动更新 Nginx 配置以利用 HTTPS。
8.2 监控与性能优化



  • Nginx Worker 历程:你可以根据服务器的 CPU 核心数来调整 Nginx 的 Worker 历程数量,以优化并发处置惩罚本领。
  • Gzip 压缩:可以启用 Gzip 压缩来淘汰文件传输巨细,提高加载速度。在 Nginx 配置文件中加入以下内容:
  1. gzip on;
  2. gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
复制代码


  • 缓存静态文件:在 Nginx 中配置缓存以提高性能和用户体验。
  1. location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
  2. expires 30d;
  3. }
复制代码
应用以上优化可以明显提高你网站的性能和用户体验。


通过本指南,你已经成功地利用 Nginx 部署了一个 Vue.js 前端项目。你相识了怎样预备情况、创建和构建 Vue 项目、配置 Nginx 以及怎样处置惩罚路由题目和进一步优化网站。
掌握 Nginx 部署 Vue 应用的本领后,你可以将这些方法应用于其他前端框架和项目,持续改进和提拔你的网站。希望这篇文章对你有所帮助,祝你在前端开发的旅程中一帆风顺!

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

十念

金牌会员
这个人很懒什么都没写!

标签云

快速回复 返回顶部 返回列表