一个nginx小白的vue项目部署的成功！

前言：事情是这样子的，我帮别人写了个网站，想要部署上去给他们看页面效果，之前也没有过多少的部署经验，第一次部署是跟着b站老师的电商管理项目的，用的宝塔，那个真的是太简单了。vue+node，node后端老师写的很厉害，前端基本不用做什么，直接把node跟vue扔到宝塔的根目录就可以了，然后直接点击外网ip访问；然后我以为所有项目部署都这么容易，所以写完了课设后也想部署上去，这次是自己写的Java后端跟vue前端，光是后端语言不一样就不能用之前的了，当时内心就觉得大事不好了，但是我是一个挺喜欢挑战的人，最重要的是我觉得没有什么是百度解决不了的，所以就搜了很多前后端分离项目的宝塔部署，果然有很多小伙伴的热心教程，挑了一些着调的区跟着部署，把java后端先部署上去启动，然后前端再部署上去，成功了！可惜我的后端很废，写的文件上传功能只能在本地运行，在服务器上路径就乱了，所以不了了之。其实之前我也还存着一个疑问，难道每个服务器只能部署一个项目吗（很蠢的问题哈哈哈，因为项目都是用的外网ip访问，外网ip又只有一个，但是端口有很多个呀哈哈哈），第三次部署是跟一个比较厉害的后端队友合作，他是用xftp跟tomcat部署的（这个部署真的简单多了），他后端已经处理了跨域，然后直接打包后端项目放在tomcat上，里面我的前端项目也可以随时更换，厉害，文件上传功能也可以解决(好像是传到服务器上的内存里，不太懂），好了，前面插了很多回忆了，现在才是真正的用我一直觉得很难的nignx部署，因为nginx操作不懂，然后那个配置文件也是一头雾水，所以一直都对nginx保持敬畏心理，能不碰就不碰。但是这次没办法，后端不是我写的，写后端的人我是联系不到的了，然后后端那边没有设置跨域，只能前端处理了，没错，我就是看中了nginx的强大反向代理能力，然后，我的面向百度部署之路又开启了。

首先云服务器肯定是要有的，然后我是用的xftp（太方便了），然后需要下载安装nginx，用的xshell命令操作（xftp可以新建终端），这个过程主要参考的这位大佬的博文，可以按照里面的步骤直接复制粘贴，然后成功安装nginx，也成功把自己的vue放在文件夹上

Xshell,Xftp,nginx配置vue项目（包含踩坑）_一只不断踩坑的新韭菜的博客-CSDN博客

接下来就是我的bug踩坑之路了，果然每个人都会有自己的bug，一切搞好之后，一访问外网ip，是其他小伙伴部署的自己的项目，所以应该是端口号的问题，然后我就改了一下端口，先查询了一下防火墙打开的端口，这些命名当然也是百度的，主要是用了第三第四个Centos7 Nginx安装与配置，防火墙开启端口监听_<^_^>的博客-CSDN博客_centos nginx配置端口

1.查看防火墙是否开启：systemctl status firewalld2.开启防火墙：systemctl start firewalld.service如果出现Failed to start firewalld.service: Unit is masked的错误，说明firewalld服务被锁定了
可执行：systemctl unmask firewalld解除锁定3.查看防火墙监听的端口号：firewall-cmd --list-ports4.防火墙开启80端口访问：firewall-cmd --zone=public --add-port=80/tcp --permanent5.重启防火墙：firewall-cmd --reload

先用第三个查了一下，发现很多端口，就随便挑了一个8081，结果还是访问不了，注意，这里打开不是404，而且根本打不开，长这样的，还有的就是转了很久圈然后访问失败的

这说明连nginx都打不开，比404还离谱，后来我看到有个博主用的其他端口，开了防火墙端口，也去云服务器开了相关安全组，我当时本来想，为啥子不用现有的端口，要自己开一个，后来我也开了一个，就用上了上面的第四个命令（记得还要去服务器开启！！！),然后就成功404了，我喜极而泣呀，这说明能用nginx了，就是nignx的nginx.confi文件里的路径配置错误。我猜想可能是那些已有端口都被占用了，不懂。

然后我继续百度404问题，vue里的proxy代理要去掉（前面的大佬博文里面有），我没有用build，所以没有assetsPublicPath，我写的publicPath:'./',我的proxy代理是这样的,访问项目直接用的/api开头

 // devServer: {//   open: true,//   host: 'http://localhost',//   port: 8080,//   https: false,//   proxy: {//     '/api/': {//       target: 'http:xxx/',//       changeOrigin: true, // target是域名的话，需要这个参数，//       secure: false, // 设置支持https协议的代理//       pathRewrite: {//         '^/api': '/' // 这里可以理解为用‘/api’来代替target里面的地址//     },//   },

然后现在的nginx.conf配置这样的

server {listen       90;server_name  localhost;#charset koi8-r;#access_log  logs/host.access.log  main;root    /usr/local/server/dist;location / {root    /usr/local/server/dist;//防止前端项目的文件路径index  index.html index.htm;try_files $uri $uri/ /index.html;add_header ‘Access-Control-Max-Age’ 0;//不知道这个有没有用，是为了防nginx缓存的}location ^~/api/{proxy_pass http:xxx/;//代理的路径在这里}

还有我的路由是这样的，现在都是我成功访问的配置

const router = new VueRouter({mode: 'hash',base:'/api/',routes
})

接下来说说我是怎么最后配成这样的，主要是config文件，搞好路径后就一直接口出现200 ok但是预览是We're sorry but xxx doesn't work properly without JavaScript enabled. Please enable it to continue.有小伙伴说这个就还是代理路径没写对，也就是这一块

location ^~/api/
{
proxy_pass http:xxx/;//代理的路径在这里
}

我之前是按照不知道哪个大哥写的，他说一定要写，我就写上去了，然后就一直We're sorry but xxx doesn't work properly without JavaScript enabled. Please enable it to continue

location ^/api/
{
proxy_pass http:xxx/;
rewrite ^.+/api?(.*)$ /$1 break;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header X-Fonwarded-For $proxy_add_x_forwarded_for;
add_header ‘Access-Control-Max-Age’ 0;
}

这里卡了很久，晚上睡得都不踏实，老想着，因为我感觉离成功很近了，再说一下我nginx遇到的问题吧，首先是start nginx命令不能操作，说没有这个命令，但是nginx -s -reload可以，网上查了资料，说是什么环境配置问题啥啥的，有些复杂，搞了一下就不搞了，用nginx -s -reload也不错，但是!我就是有事出去一趟，回来后nginx -s -reload也报错了,说

nginx: [error] open() "/www/server/nginx/logs/nginx.pid" failed (2: No such file or directory)

把命令改成/usr/local/nginx/sbin/nginx -s reload就可以，参考来自这个博客大佬

nginx 报异常"/usr/local/nginx/logs/nginx.pid" failed (2: No such file or directory)处理方法_Java高知社区的博客-CSDN博客_/usr/local/nginx/logs/nginx.pidh 差不多就这些吧，只要前端在本地能成功运行，那部署上线后出现的各种问题就是配置的锅了，感谢有百度一类的神器存在，也感谢各位热心的大佬，所以大家有什么bug都可以直接查找一下，实在不行重启电脑哈哈哈哈，就这样吧，nignx还是要学一下的，懂多点总是好的，感谢阅读，有什么问题或建议都可以提出来一起讨论哦！

一个nginx小白的vue项目部署的成功！相关推荐

面试宝典六-- 项目部署（linux环境搭建，springboot项目部署，vue项目部署，nginx负载均衡）
环境准备实际开发中,项目肯定是部署在一个个的linux系统服务器中的,学习过程中,可以在自己电脑上安装虚拟机然后配置linux操作系统进行模拟项目部署,当然也可以花费较小费用使用各种平台提供的云服 ...
linux 退出服务器_Vue实战091：Vue项目部署到nginx服务器
项目开发完成之后我们就需要将项目上线运行供用户访问,这时候我们就需要将项目部署到服务器上.对于Vue这种前端Web项目我们一般都部署在linux系统上,Linux常见的Web应用服务器有Apache. ...
vue项目部署到nginx
vue项目部署到nginx 一.vue项目打包修改config/index.js的assetsPublicPath为 ./(注意一定是build里面的,下面dev中也有这个配置) 这个路径的配置很重 ...
将Vue项目部署在Nginx,解决前端路由、反向代理和静态资源问题
将Vue项目部署在Nginx,解决前端路由.反向代理和静态资源问题需求: 一台服务器,Linux 安装了Nginx 使用Vue脚手架编写的Vue项目第一步:将Vue项目打包,然后将生成的dist文 ...
vue打包部署到php,打包vue项目部署在nginx
因为liunx操作命令不是很熟,我整的是宝塔面板部署哈首先在本地打包vue项目,打包成功后,项目中会多出一个dist 文件夹把dist上传到服务器配置nginx配置文件,新建一个othercon ...
springboot项目部署 + vue项目部署
部署一个简单的前后端分离的博客项目 springboot项目部署第一步:打包springboot项目(jar包) 第二步:将jar(项目的target目录下)包上传到云服务器上(Xftp) 第三步: ...
Vue项目部署及使用WebStorm开发Vue
Vue项目部署及使用WebStorm开发Vue Vue项目部署搭建Vue环境新建Vue项目使用WebStorm开发Vue WebStorm相关配置配置路由全局页面App.vue 全局引入组件 ...
Vue项目部署到服务器(ubuntu)
Vue项目部署到服务器(ubuntu) 工具:WinSCP.PuTTy(可能不是专业的工具,是本人上操作系统的课用到的软件,直接用来部署了) 打包项目,npm run build 执行npm run ...
将springboot项目和vue项目部署到windows 2016 server（服务器）
将springboot项目和vue项目部署到服务器 1.服务器环境配置 1.1 服务器需要安装的环境 1.2 服务器需要配置的入站与进站规则 2.springboot项目的打包 2.1 springb ...
ssm项目直接加html文件,如何把ssm项目和vue项目部署在云服务器（上）
如何把ssm项目和vue项目部署在云服务器(上) 如何把ssm项目和vue项目部署在云服务器(上) 一.引入 URL的概念理解在WWW上,每一信息资源都有统一的且在网上唯一的地址,该地址就叫URL( ...

一个nginx小白的vue项目部署的成功！

一个nginx小白的vue项目部署的成功！相关推荐

最新文章

热门文章