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