nginx部署vue前端项目，访问报错500 Internal Server Error

耷腊呜呜2023-09-23 4:05

前言

描述：当我配置好全部之后，通过服务器 ip 地址访问，遇到报错信息：500 Internal Server Error。

情况说明

前提：我是通过Docker启动nginx容器，通过-v 绑定数据卷，将html文件和nginx.conf通过挂载的方式启动。

我将vue项目打包放在 html路径下。通过启动命令启动nginx容器，命令如下所示：

shell 复制代码

docker run -d --privileged=true --name nginx -v /mydata/nginx/html:/usr/share/nginx/html -v /mydata/nginx/nginx.conf:/etc/nginx/nginx.conf -p 80:80 nginx

一、展示配置

1.1 nginx.conf

shell 复制代码

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       80;
        server_name  localhost;
		charset utf-8;

		location / {
            root   /usr/share/nginx/html;
	    	try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }
		


     	error_page   500 502 503 504  /50x.html;
    	location = /50x.html {
            root   html;
        }
    }
}

1.2 详细解释

shell 复制代码

		location / {
            root   /usr/share/nginx/html;

/usr/share/nginx/html：对应的路径应该是docker内部映射的html所在的文件路径，而不是主机上的html所在路径。

总结

至于为什么会出现标题上面的报错，是因为我把配置文件内的 root 对应的路径写错了。所以在我排查的过程中，一直觉得很奇怪，明明html路径也有，容器启动正常，就是访问不到。花费了一些时间。

知识归纳：
在这个实验中，我意识到nginx.conf这个文件针对的是容器内部才有效，而不是看着容器外面的路径。