解决Vue项目部署到服务器之后前端向后端发送请求报错404的问题(centos使用docker实现nginx的反向代理)

服务器 0
场景重现:

由于现在流行前后端分离的部署方式,但是按照正确方法部署(如何部署可参考:)之后,发现明明前后端都部署好了并且运行成功,但是前端发送的请求都是404。明明在vue项目中配置了跨域的相关设置:

ps:本地配置跨域请参考:什么是跨域?如何解决跨域问题?-CSDN博客 

明明没问题,为什么就是发不过去呢,这是因为在本地环境下,这个配置是有效的,但是执行npm run build之后,并不会对这部分打包,也就是说即使你本地已经配置好了,但是打包好的dist文件里面并没有这部分,这就需要配置nginx,通过nginx代理到后端的端口。

话不多说,我们直接看如何操作。

开始解决:

首先我们检查nginx是否启动,输入:

docker ps

 

可以看到是正常启动的,然后我们进入容器内部:

docker exec -it nginx bash

注:nginx为你的容器名,也可以使用容器id,成功进去之后,显示容器id: 

如果显示一个类似于:is restarting的错误,反正就是没进来,提示有一个error,那就执行:(成功进来就不用管了,跳过就行)

docker stop nginx

docker start nginx

 重新启动容器就行,如果还是不行,那就是你的配置或者run命令出现了问题,直接stop容器,然后docker rmi nginx重新执行一遍run命令即可,本人的run命令如下,可作为参考:

  docker run -d -p 80:80 --name nginx  -v /home/nginx/dist:/usr/share/nginx/html --restart=always nginx

进来容器之后,我们进入配置文件目录:

cd /etc/nginx

可以看到,里面就有nginx.conf,不过我们的目标不在这里,而是前面的conf.d,不过我们也可以看一下nginx.conf里面是什么:

ps:如果是第一次进入容器,需要先执行下面两条命令下载vim编辑器

apt-get update

apt-get install vim 

下载完成(下载会比较慢,不用着急,下载过程大概需要五分钟左右)之后直接输入:

vi nginx.conf 

回车进入配置文件: 

其实你可以看到,他关于server的设置都是在conf.d下的*/conf文件中

然后我们按下键盘的esc键,输入:wq退出即可(包括冒号)。然后我们进入conf.d中

可以看到只有一个文件,我们输入:

vi default.conf

 进入配置文件

你们进来是没有红框里面的内容的,这也是需要加进来的配置:

location /api/ {

         proxy_pass  http://localhost:8080/;
         proxy_set_header Host $host;
         proxy_set_header X-Real-IP $remote_addr;
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
         proxy_set_header X-Forwarded-Proto $scheme;
}

 切记把api替换成你前端代理的地址(一般人都是api),然后把localhost换成你服务器的地址,尽量不要用localhost。

location在监听到前端发送请求之后,如果你的路径中带有api,就会自动转发到你指定的地址,这样就实现了nginx的反向代理,同时,你也可以实现多端的发送,可以设置多个location,可以代理到多个后端接口。设置完成之后保存退出即可,按下esc,输入:wq(包含冒号)。重启nginx即可:

docker restart nginx

查看是否启动成功:

docker ps 

总结&可能出现的错误

最后,修改配置文件的时候注意一定要细心,比如 location /api/,location后面是有空格的,最后面的/不要丢掉,服务器路径后面的/也不要丢掉,后面的分号也必须要有,分号(;)代表语句的结束,没有分号就会连着执行两条语句,就会报错。

最后的最后,我们来分析并解决一下你可能会出现的问题,或者已经出现了的问题。

首先就是最后重启nginx之后,发现输入docker ps发现没有nginx,然后输入docker ps -a,发现有nginx这个容器,但是没有端口。这时候可以输入:

docker logs nginx

 查看nginx的启动日志,你发现最下面报了好几个error,针对不同的错误去做不同的解决方式,但是,由于你只进行了本文的conf配置文件配置修改,那就是说只有一个原因:你的配置文件写错了。由于你的nginx启动不了,你也没有办法进入容器重新查看配置文件,你只能docker rmi nignx,然后重新执行一遍run命令。然后重新配置一遍,这次一定要检查好有没有输错,缩进分号有没有按照要求来。

如果是ps发现跑起来了,但是没有端口,那就是端口被占用了或者是其他一些原因了,这个很容易解决,端口被占用,kill掉就可以,其他原因大概率也是nginx本身的原因,看一下是不是你的run命令写错了,stop掉然后rmi之后重新run一遍吧。

最后就是挂载的问题,我建议把nginx的html挂载到主目录的某个文件下,但是不建议挂载配置文件,第一是我认为配置文件一般只需要配置一次即可,特别是服务器上的,第二是如果挂载文件和被挂载文件不同的话,是有一定可能出现问题的,第三也是为了安全性,还是让他就在容器里面呆着吧。

作为一个加起来只有七个月开发时间的全栈工程师,还没入门,不过好像依稀已经可以看得到远方的门槛了,我还有很长的路要走,本文也是我的一点经验,文章略显稚嫩,希望各路大神可以指点一二,也预祝大家从此没有bug,在全栈和架构师的道路上越走越远!

也许您对下面的内容还感兴趣: