nginx 部署vue http、https
nignx配置文件
server {
listen 80;
server_name your_domain.com;
return 301 https://$server_name$request_uri;
}
server {
listen 443 ssl;
server_name your_domain.com;
ssl_certificate /path/to/your/ssl/certificate;
ssl_certificate_key /path/to/your/ssl/key;
location / {
root /path/to/your/vue/app;
index index.html;
try_files $uri $uri/ /index.html =404;
}
}
try_files
try_files file... uri
这个语法的意思是:
try_files
后面可以定义多个文件路径和最后一个作为内部跳转的uri
,其中文件路径是和alias
和root
两个指令合在一起构造而成;- 多个文件以第一个找到的文件作为请求;
- 而文件后面以"/"结尾,会检查目录是否存在;
- 当文件都找不到时,就会去以最后一个uri进行内部跳转请求。
- 添加 =404 参数,这将在找不到文件时返回 404 错误,而不是进入内部重定向循环。
SSL
SSL 证书文件 (.crt 或 .pem 格式):
ssl_certificate "/etc/pki/nginx/server.pem";
SSL 证书密钥文件 (.key 格式):
ssl_certificate_key "/etc/pki/nginx/private/server.key";
root
在Nginx配置文件中,确保 root 指令指向正确的Vue.js应用程序目录:
访问权限问题,需要确保 Nginx
用户(通常是 nginx
或 www-data
)对该目录有读取和执行的权限。
先检查 Nginx 进程运行的用户和组是否与你设置的权限一致
ps aux | grep nginx
查看输出中 nginx
进程的用户和组是否为 nginx:nginx
。如果不是,你需要更新 Nginx
配置以使用正确的用户和组,或者移动项目到有权限的访问目录中。
由于 Nginx 进程通常以非 root 用户(如 nginx 或 www-data)运行,并且 /root 目录对其他用户是不可访问的,因此还是会遇到权限问题。
建议将你的静态文件移动到一个非 root 的目录下,例如 /var/www
,并确保该目录和文件的权限设置正确。
使用以下命令设置权限:
chown -R nginx:nginx /path/to/your/vue/app;
chmod -R 755 /path/to/your/vue/app;
完成上述步骤后,请重启 Nginx 服务以应用更改:
nginx -t // 检查nignx 配置文件是否出错
systemctl restart nginx // 重启nginx