【Nginx 】Nginx 部署前端 vue 项目

2024-09-06 19:20

本文主要是介绍【Nginx 】Nginx 部署前端 vue 项目,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1. 项目打包

1.1 安装依赖

在项目部署之前,确保开发环境中已安装Node.js和npm,这是运行Vue项目的基础。通过执行npm install命令,可以安装项目所需的所有依赖。这一步是打包流程的前提,确保了后续编译的顺利进行。

根据npm的官方数据,npm install命令在安装依赖时,会根据package.json文件中列出的依赖项进行下载和安装,这个过程通常需要联网操作,并且依赖于npm仓库的响应速度。在网络状况良好的情况下,安装过程可以顺利完成。

1.2 编译项目

项目依赖安装完成后,接下来需要编译Vue项目。编译过程是通过执行npm run build命令来完成的,该命令会触发Vue CLI中的构建脚本,将源代码转换为浏览器可以理解的静态资源。

编译过程中,Webpack作为模块打包器,会根据配置文件vue.config.js中的规则,对项目中的JavaScript、CSS、图片等资源进行打包和优化。这个过程包括代码的压缩、合并、分割等多个步骤,以确保最终生成的静态资源既高效又轻量。

根据Vue CLI的官方文档,编译后的资源会被放置在项目根目录下的dist文件夹中。这个文件夹包含了所有用于生产环境的静态文件,如HTML、CSS、JavaScript等。这些文件是部署到Nginx服务器上的核心内容。

在编译过程中,还可以通过添加环境变量来指定不同的构建环境,例如开发环境、测试环境和生产环境。这样可以确保在不同环境下构建的资源具有相应的优化和配置。

2. 安装Nginx

2.1 Ubuntu/Debian系统

在Ubuntu或Debian系统上安装Nginx通常涉及以下步骤,这些步骤可以确保用户能够快速且正确地安装Nginx服务器。

  • 软件更新:首先,执行sudo apt-get update命令来更新本地软件包索引。这一步是必要的,因为它确保了在安装过程中能够获取到最新的软件包版本。
  • 安装Nginx:通过执行sudo apt-get install nginx命令来安装Nginx。这个过程会自动处理依赖关系,并安装Nginx及其所需的所有组件。
  • 启动服务:安装完成后,使用sudo systemctl start nginx命令启动Nginx服务。这是确保Nginx能够正常工作的第一步。
  • 验证安装:为了验证Nginx是否正确安装和运行,可以通过访问http://localhost或服务器的IP地址来查看Nginx的欢迎页面。如果页面加载成功,说明Nginx已经成功运行。

2.2 CentOS/RHEL系统

在CentOS或RHEL系统上安装Nginx的过程与Ubuntu/Debian略有不同,主要体现在软件包管理器的使用上。

  • 软件更新:首先,执行sudo yum update命令来更新系统上的软件包。这一步确保了系统上的软件包列表是最新的。
  • 安装Nginx:通过执行sudo yum install nginx命令来安装Nginx。这个命令会处理所有的依赖关系,并安装Nginx服务器。
  • 启动服务:使用sudo systemctl start nginx命令来启动Nginx服务。这一步是确保Nginx能够响应网络请求的关键。
  • 验证安装:与Ubuntu/Debian系统一样,可以通过访问http://localhost或服务器的IP地址来检查Nginx的欢迎页面。如果页面能够成功加载,这表明Nginx已经正确安装并运行。

在两种系统中,安装Nginx的过程都相对简单,主要区别在于使用的软件包管理器不同。无论是在Ubuntu/Debian还是CentOS/RHEL系统上,用户都可以遵循上述步骤来安装和验证Nginx服务器。

3. 配置Nginx

3.1 创建Nginx配置文件

创建Nginx配置文件是部署Vue项目的关键步骤之一。以下是一个基本的配置文件示例,它定义了服务器如何响应对Vue应用的请求。

server {listen 80;server_name your_domain_or_ip;root /var/www/my-vue-app/dist;index index.html;location / {try_files $uri $uri/ /index.html;}location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot|otf)$ {expires max;log_not_found off;}error_page 500 502 503 504 /50x.html;location = /50x.html {root /usr/share/nginx/html;}
}

在这个配置中,listen 80; 表示服务器监听80端口,server_name your_domain_or_ip; 应替换为你的域名或IP地址。root /var/www/my-vue-app/dist; 指定了Vue项目打包后的静态文件存放位置。location / 块中的 try_files 指令确保了Vue的前端路由能够正确工作,即使在刷新或直接访问非根路径时。

3.2 启用配置文件

启用配置文件通常涉及两个步骤:创建配置文件的符号链接,然后重新加载Nginx配置。

sudo ln -s /etc/nginx/sites-available/my-vue-app /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl restart nginx

首先,使用 ln -s 创建一个符号链接,将你的配置文件链接到 sites-enabled 目录。接着,使用 nginx -t 测试配置文件是否有语法错误。如果没有错误,使用 systemctl restart nginx 命令重启Nginx服务以应用新的配置。

3.3 测试并重启Nginx

在应用了新的Nginx配置之后,需要进行测试以确保一切正常工作。这包括访问Vue应用的主页,以及尝试访问应用中的各个路由,确保它们都能正确加载。

  • 访问应用:在浏览器中输入 http://your_domain_or_ip,检查Vue应用是否能够正确加载。
  • 检查路由:尝试访问应用的不同路由,确保前端路由跳转能够正常工作。
  • 查看日志:如果遇到问题,查看Nginx的错误日志可以提供有用的信息。日志文件通常位于 /var/log/nginx/error.log

如果一切正常,你的Vue应用现在应该已经成功部署在Nginx服务器上了。如果遇到问题,仔细检查配置文件中的指令,确保没有遗漏或错误。

4. 部署Vue项目

4.1 将打包文件上传到服务器

将Vue项目打包后生成的dist目录上传至服务器是部署过程中的关键步骤。根据服务器的操作系统和配置,可以使用多种方法进行上传。

  • 使用scpsftp:这些是Linux系统常用的文件传输协议,可以安全地将文件从本地传输到远程服务器。例如,使用scp -r dist/ username@server_ip:/path/to/remote/命令。
  • 使用rsync:该工具可以同步文件和目录,并且可以保留文件的权限和时间戳,适合于增量备份和镜像。命令示例:rsync -avz --progress dist/ username@server_ip:/path/to/remote/.
  • 使用FTP客户端:如FileZilla等,这些工具提供了图形界面,使得文件传输更加直观和便捷。

一旦文件上传完成,需要确保Nginx可以正确地读取和提供这些文件。这通常意味着需要将文件上传到Nginx配置中指定的root目录。

4.2 设置文件权限

在Linux系统中,文件权限对于服务器的运行至关重要。Nginx服务通常以非root用户运行,因此需要确保该用户有权访问和提供Vue项目文件。

  • 使用chown命令更改文件的所有者,例如:sudo chown -R www-data:www-data /path/to/dist/,这里www-data是Nginx进程通常运行的用户名,这可能因安装而异。
  • 使用chmod命令设置适当的文件权限,以确保Nginx可以读取文件。通常,755(读、执行权限)是目录的推荐权限,而644(读、写权限)是文件的推荐权限。命令示例:sudo chmod -R 755 /path/to/dist/
  • 验证权限设置:使用ls -l /path/to/dist/命令检查文件和目录的权限,确保它们符合预期。

正确设置文件权限是确保Vue项目能够被Nginx正确服务的前提。权限不足可能导致文件无法读取,从而影响网站的访问。

5. 配置SSL(可选)

5.1 安装Certbot

Certbot 是一个开源工具,由 Let’s Encrypt 提供,用于自动化获取和续订 SSL/TLS 证书的过程。安装 Certbot 的步骤通常如下:

  • 对于基于 Debian 的系统(如 Ubuntu),使用以下命令安装:

    sudo apt-get update
    sudo apt-get install certbot python-certbot-nginx
    
  • 对于基于 Red Hat 的系统(如 CentOS),使用以下命令安装:

    sudo yum update
    sudo yum install certbot python-certbot-nginx
    
  • 安装完成后,可以使用 Certbot 与 Nginx 集成,自动化 SSL 证书的获取和配置过程。

5.2 获取证书并配置Nginx

使用 Certbot 获取 SSL 证书并自动配置 Nginx 的步骤如下:

  • 运行 Certbot 命令,指定 Nginx 作为插件,并提供你的域名:

    sudo certbot --nginx -d your_domain_or_ip
    
  • Certbot 将自动验证你的域名,获取 SSL 证书,并更新 Nginx 配置以使用证书。

  • 配置文件通常更新在 /etc/nginx/sites-available/ 目录下,Certbot 会创建一个包含 SSL 配置的文件。

5.3 自动更新证书

Let’s Encrypt 证书的有效期为 90 天,因此需要定期更新。Certbot 提供了自动更新的功能:

  • 设置自动更新任务,通常通过 cron 定时任务实现:

    echo "0 3 * * * /usr/bin/certbot renew --quiet" | sudo tee -a /etc/crontab > /dev/null
    
  • 该命令会在每天凌晨 3 点运行 Certbot 以更新证书,确保 SSL 证书始终保持有效状态。

  • 为了确保 Nginx 配置在证书更新后能够正确加载,可以在更新证书后重启 Nginx:

    sudo systemctl restart nginx
    
  • 通过这种方式,即使在证书更新后,前端 Vue 项目也能够继续通过 HTTPS 安全地提供服务。

6. 测试部署

6.1 访问测试

部署完成后,通过访问服务器的IP地址或绑定的域名来测试Vue项目是否能够正常加载。检查页面元素、脚本和样式是否正常工作,确保没有资源加载错误。

  • 浏览器兼容性:在不同的浏览器上进行测试,包括但不限于Chrome、Firefox、Safari和Edge,确保前端项目在所有主流浏览器上都能正常显示和交互。
  • 响应式测试:验证页面在不同设备和分辨率上的响应式布局,确保移动端和桌面端用户都能获得良好的浏览体验。

6.2 性能测试

对Vue项目进行性能测试,包括页面加载时间、资源加载时间、白屏时间等关键性能指标的测试。

  • 性能监控工具:使用Google Lighthouse、WebPageTest等工具对项目进行性能评估,根据测试结果优化项目性能。
  • 资源优化:根据测试结果,对项目中的图片、脚本和样式进行压缩和优化,减少HTTP请求次数,提高加载速度。

6.3 安全性测试

验证部署的Vue项目是否符合安全标准,包括但不限于跨站脚本攻击(XSS)、跨站请求伪造(CSRF)等常见的网络安全威胁。

  • 安全审计:进行代码审计和安全漏洞扫描,确保项目中没有安全漏洞。
  • HTTPS配置:确保项目通过HTTPS协议提供服务,使用SSL/TLS证书加密数据传输,保护用户数据安全。

6.4 备份与恢复

为防止数据丢失和系统故障,定期对项目文件和数据库进行备份,并确保能够快速恢复。

  • 备份策略:制定备份计划,包括备份频率、备份存储位置和备份数据的保留时间。
  • 恢复演练:定期进行数据恢复演练,验证备份数据的有效性和恢复流程的可行性。

这篇关于【Nginx 】Nginx 部署前端 vue 项目的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1142896

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

闲置电脑也能活出第二春?鲁大师AiNAS让你动动手指就能轻松部署

对于大多数人而言,在这个“数据爆炸”的时代或多或少都遇到过存储告急的情况,这使得“存储焦虑”不再是个别现象,而将会是随着软件的不断臃肿而越来越普遍的情况。从不少手机厂商都开始将存储上限提升至1TB可以见得,我们似乎正处在互联网信息飞速增长的阶段,对于存储的需求也将会不断扩大。对于苹果用户而言,这一问题愈发严峻,毕竟512GB和1TB版本的iPhone可不是人人都消费得起的,因此成熟的外置存储方案开

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

如何用Docker运行Django项目

本章教程,介绍如何用Docker创建一个Django,并运行能够访问。 一、拉取镜像 这里我们使用python3.11版本的docker镜像 docker pull python:3.11 二、运行容器 这里我们将容器内部的8080端口,映射到宿主机的80端口上。 docker run -itd --name python311 -p

阿里开源语音识别SenseVoiceWindows环境部署

SenseVoice介绍 SenseVoice 专注于高精度多语言语音识别、情感辨识和音频事件检测多语言识别: 采用超过 40 万小时数据训练,支持超过 50 种语言,识别效果上优于 Whisper 模型。富文本识别:具备优秀的情感识别,能够在测试数据上达到和超过目前最佳情感识别模型的效果。支持声音事件检测能力,支持音乐、掌声、笑声、哭声、咳嗽、喷嚏等多种常见人机交互事件进行检测。高效推

在cscode中通过maven创建java项目

在cscode中创建java项目 可以通过博客完成maven的导入 建立maven项目 使用快捷键 Ctrl + Shift + P 建立一个 Maven 项目 1 Ctrl + Shift + P 打开输入框2 输入 "> java create"3 选择 maven4 选择 No Archetype5 输入 域名6 输入项目名称7 建立一个文件目录存放项目,文件名一般为项目名8 确定

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能

Vue3项目开发——新闻发布管理系统(六)

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后,系统就进入了首页。接下来,也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分,左侧为系统的菜单栏,右侧