虚拟机安装nginx并部署Vue项目

原创 已于 2024-01-15 15:24:17 修改 · 3.2k 阅读 · 19 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#nginx #vue.js #运维

于 2021-04-14 17:13:34 首次发布
本文详细指导如何在CentOS 7虚拟机上安装Nginx，配置PCRE、Zlib和OpenSSL扩展，并部署Vue项目，包括修改端口、防火墙设置和最终的测试过程。

虚拟机安装nginx并部署Vue项目

虚拟机用的操作系统是centos7

一、安装nginx需要先将官网下载的源码进行编译，编译依赖gcc环境，如果没有gcc环境，需要安装gcc：

yum -y install gcc

在这里插入图片描述

二、 Nginx下载安装

wget http://nginx.org/download/nginx-1.13.0.tar.gz

在这里插入图片描述
三、Nginx解压安装：
解压文件到usr/software目录下面，如果没有software文件夹需要先创建

 tar -zxvf nginx-1.13.0.tar.gz -C /usr/software

最低0.47元/天 解锁文章
vue 虚拟主机_Vue实现简单前后端分离（虚拟主机也可用）
weixin_39867509的博客
12-20 847
我们提到前后端分离，第一想到的应该是跨域问题！之前的项目跨域问题我都是在Vue端解决，部署上线后通过nginx进行反向代理。这种方法有个小坑，大家可以尝试下使用Apache搭建后端api，然后使用Nginx进行反向代理转发，在windows和安卓上没有问题，但是在苹果全家桶(无论是IOS、MacOS)都无法请求到数据回来。解决办法当然就是前后端都用Nginx服务器啦。开始今天我们利用后端来解决跨域...
docker 安装 nginx 部署Vue前端项目
最新发布
weixin_48568302的博客
03-18 1536
docker 安装 nginx 部署Vue前端项目
【Nginx 】Nginx 部署前端 vue 项目
热门推荐
衍生星球的博客
09-06 1万+
在项目部署之前，确保开发环境中已安装Node.js和npm，这是运行Vue项目的基础。通过执行命令，可以安装项目所需的所有依赖。这一步是打包流程的前提，确保了后续编译的顺利进行。根据npm的官方数据，命令在安装依赖时，会根据文件中列出的依赖项进行下载和安装，这个过程通常需要联网操作，并且依赖于npm仓库的响应速度。在网络状况良好的情况下，安装过程可以顺利完成。
vue项目部署到虚拟机
weixin_45161039的博客
08-24 3389
虚拟机环境配置 本地计算机系统：Windows 10 下载安装 VMware Workstation Pro 下载地址：https://my.vmware.com/cn/web/vmware/details?downloadGroup=WKST-1552-WIN&productId=799&rPId=42649 下载 CentOS 7 映像文件（iso） 下载地址：http://isoredirect.centos.org/centos/8/isos/x86_64/Ce
使用Nginx部署前端Vue项目
m0_70066267的博客
09-02 2131
使用Nginx部署Vue项目是一个相对简单且高效的过程。通过遵循上述步骤，你可以轻松地将Vue应用部署到生产环境中，并通过一些优化策略来提升应用的性能和用户体验。当然，随着Vue和Nginx的不断发展，可能会有更多的新特性和最佳实践出现，因此建议定期关注相关的社区和文档，以保持对最新技术的了解。
Nginx虚拟主机（server块）部署Vue项目
宋冠巡的博客
08-19 565
配置虚拟主机，实现一个Nginx运行多个服务。
将Vue项目部署在本地Linux虚拟机的docker上
m0_59434053的博客
07-19 1296
在本地的Linu虚拟机中的docker简单地部署vue项目
【前端部署】Ubuntu22.04 使用nginx部署vue前端项目教程
m0_74824574的博客
12-19 1279
一般情况下，我们是不会去修改nginx原有的配置文件内容,而是另外添加一些关键的文件，使得nginx在运行的时候顺带执行咱们添加的文件来完成相应的功能。下的所有文件，这样当然也就顺便把文件myweb.conf加载啦，而myweb.conf文件存放的是我们部署的前端代码文件的一些信息，这样nginx就能加载到咱们的前端代码啦。有足够权限访问当前ubuntu用户目录下的前端文件(因为本人是把前端文件的路径添加在当前ubuntu用户目录下的)。下的所有以.conf结尾的文件都复制到这里，而路径。
yum安装nginx，并部署前端vue项目到虚拟机上运行
weixin_44728473的博客
07-06 1593
yum安装nginx，并部署前端vue项目到虚拟机上运行 1.搜索一下有没有nginx，命令如下 yum search nginx2.查询nginx要安装的版本，命令如下 whereis nginx3.安装nginx，命令如下 yum install nginx.x86_644.移除nginx，命令如下 yum remove nginx5.打开目录，命令如下 cd /usr/sbin 6.启动，命令如下 ./nginx7.查看nginx进程，命令如下 ps -aux |grep nginx .......
Centos+Nginx部署Vue项目
宁不知的博客
10-28 4578
Centos+Nginx部署Vue项目 1.项目打包生成dist文件夹 npm run build //生成dist文件夹 2.将dist文件夹上传到centos7 //我的放在 /home/dist 3.安装nginx 推荐链接： https://www.cnblogs.com/kaid/p/7640723.html 4.nginx的几个常用命令 //进入 /sbin目录下 cd /us...
【虚拟机安装与部署系列（五）】：部署前后端分离项目（SpringBoot + Vue）
a13849911849的博客
08-22 2328
虚拟机、VMware、Centos7、服务器部署、linux安装服务器、虚拟机安装Nginx、虚拟机安装Mysql、
手把手从安装本地虚拟机，基于docker，部署springboot+vue项目（若依框架前后端分离版本演示），基于openjdk的dockerfile
谷咕咕
12-16 1611
手把手从安装本地虚拟机，基于docker，部署springboot+vue项目（若依框架前后端分离版本演示），基于openjdk的dockerfile
nginx部署vue项目上线
huiaixing的博客
05-14 1855
1、安装nginx 安装nginx其实非常简单的，常见问题1：如果自己买的服务器使用apt-get命令报错，那么先输入 apt-get install update命令，更新一下就行了。关于安装nginx，推荐这篇博文，我之前第一次安装找了很多文章，这篇非常棒：nginx安装 2、前端上线 写在前面，推荐大家安装MobaXterm，点击这里前往官网下载。 下载免费版的就行，这个软件很好用，上传文件非常方便，自己要把前后端的文件传到服务器的话，这个文件可以很轻松搞定。 与服务器建立连接： 依次点.
nginx部署前端Vue项目
永恩&猫咪的博客
04-28 624
记录一下自己用nginx部署前端Vue的过程 打包 npm run build 出现一些提示 Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won't work. 这个我没遇到什么问题，不是报错就行。 但是打完包之后 直接点开生成的index.html页面 却发现是空白页，然后查阅发现是config文件中的index.js问题 将assetsPublicPa
Nginx部署前端vue项目
qq_38526245的博客
11-02 345
1.nginx使用 参考：https://blog.csdn.net/qq_33661804/article/details/85340697 1.1 下载安装： 下载 wget http://nginx.org/download/nginx-1.13.6.tar.gz 解压缩 tar -zvxf nginx-1.13.6.tar.gz cd nginx-1.13.6 安装 ./configure --with-http_ssl_module --with-http_gzip_static_module
nginx部署前端vue项目
破损的天堂鸟博客
09-02 2134
在Nginx配置文件中定义一个或多个后端服务器组（upstream），并指定这些服务器的地址和端口。
宝塔部署前端vue项目nginx配置
03-15
### 如何在宝塔面板中正确配置 Nginx 以部署 Vue 前端项目 #### 一、准备工作 为了成功部署 Vue 前端项目，在开始之前需完成以下准备事项： - **购买服务器**：选择合适的云服务提供商（如阿里云），并创建一台虚拟机实例，推荐使用 CentOS 或 Ubuntu 操作系统[^3]。 - **安装宝塔面板**：通过官方文档或脚本快速安装宝塔面板。该工具提供了可视化的管理界面，极大简化了 Linux 系统上的运维工作[^2]。 #### 二、环境搭建 登录到宝塔面板后执行以下操作： 1. **安装必要组件** - 在左侧菜单栏找到“软件商店”，依次安装 `Nginx` 和其他可能需要用到的服务（例如 PHP）。尽管 Vue 是静态资源项目，但某些情况下仍需要配合动态语言处理特定请求。 2. **上传构建文件** - 使用 FTP 工具（比如 Xftp）连接至服务器，将本地打包好的 Vue 应用程序目录复制到 `/www/wwwroot/your-domain.com` 下面[^1]。注意这里的路径可以根据实际需求调整，默认根目录由站点设置决定。 #### 三、Nginx 配置详解 针对 Vue 单页面应用 (SPA)，如果直接访问子路由会出现 404 错误，则需要修改默认的 Nginx 配置来支持 HTML5 History Mode： 1. 创建一个新的网站或者编辑现有站点； 2. 进入对应的域名配置选项卡下的伪静态规则部分； 3. 添加自定义规则如下所示： ```nginx location / { try_files $uri $uri/ /index.html; } ``` 这段代码的作用在于当用户尝试加载不存在的具体 URL 地址时重定向回首页 index.html 文件从而让前端框架接管渲染逻辑[^4]。 #### 四、解决跨域问题 对于前后分离架构的应用场景来说，不可避免会碰到 CORS(Cross-Origin Resource Sharing) 的挑战。可以通过两种方式应对这一情况： ##### 方法A: 修改后端允许来源头信息 确保 API 接口所在的服务器响应头部包含了正确的 Access-Control-Allow-* 字段值给定客户端许可范围。 ##### 方法B: 设置反向代理 利用 Nginx 实现内部跳转而不暴露真实地址的方式规避浏览器的安全策略限制。具体做法是在刚才提到过的高级设置区域填写目标主机的信息以及可选的内容替换表达式。 --- ### 总结 综上所述，借助于宝塔面板的强大功能可以非常便捷高效地完成整个流程从初始化到最后上线的过程。只要遵循上述指导原则，并妥善处理好各个细节之处就能顺利实现预期效果。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值