部署项目--nginx--403

要在CentOS上部署Vue项目，假设已经打包好了 dist 文件夹：

1. 准备工作

确保你已经安装了以下软件：

Node.js 和 npm
一个 Web 服务器，例如 Nginx 或 Apache

2. 上传打包文件

将 dist 文件夹上传到你的 CentOS 服务器上。使用 scp 命令或通过 FTP 工具上传文件。

例如使用 scp 命令：

scp -r ./dist username@your_server_ip:/path/to/your/project

3. 安装 Nginx

如果你还没有安装 Nginx，可以通过以下命令安装：

sudo yum install epel-release sudo yum install nginx

4. 配置 Nginx

编辑 Nginx 配置文件来指向你的 Vue 项目。打开 /etc/nginx/nginx.conf 文件，或者在 /etc/nginx/conf.d/ 目录下创建一个新的配置文件。

例如，在 /etc/nginx/conf.d/ 目录下创建一个新的配置文件 vue_project.conf：

sudo nano /etc/nginx/conf.d/vue_project.conf

添加以下配置：

server {
    listen       80;
    server_name  your_domain_or_ip;

    location / {
        root   /path/to/your/project/dist;
        try_files $uri $uri/ /index.html;
    }
}

将 /path/to/your/project/dist 替换为你上传的 dist 文件夹的实际路径。

5. 启动 Nginx

保存配置文件并重启 Nginx：

sudo systemctl restart nginx

6. 开启防火墙端口

确保防火墙允许 HTTP 流量：

sudo firewall-cmd --permanent --add-service=http sudo firewall-cmd --reload

7. 访问你的应用

现在你可以通过你的域名或服务器 IP 访问你的 Vue 应用。例如 http://your_domain_or_ip。

配置文件编写好之后403 dist文件权限

[root@localhost files]# ls -al /var/www/vue_project/ 
总用量 4 
drwxr-xr-x. 3 root root 18 6月 17 21:35 . 
drwxr-xr-x. 5 root root 52 6月 17 21:35 .. 
drwxrwxr-x. 4 moye moye 4096 6月 17 21:30 dist

Note

修改文件夹权限和所有者

1. 确认 Nginx 用户

首先，确认 Nginx 服务是以哪个用户运行的。通常是 nginx 或 www-data。可以通过以下命令查看：

ps aux | grep nginx

输出中应该可以看到 Nginx 进程运行的用户，例如：

nginx    12345  0.0  0.0 123456  1234 ?        Ss   20:20   0:00 nginx: master process /usr/sbin/nginx
nginx    12346  0.0  0.0 123456  1234 ?        S    20:20   0:00 nginx: worker process

这里显示 Nginx 是以 nginx 用户运行的。

2. 修改 `dist` 文件夹所有者

将 dist 文件夹及其内容的所有者改为 Nginx 用户：

sudo chown -R nginx:nginx /var/www/vue_project/dist

3. 确保权限正确

确保 dist 文件夹及其内容的权限设置为 755，即所有者有读写执行权限，组和其他用户有读取和执行权限：

sudo chmod -R 755 /var/www/vue_project/dist

检查和重启 Nginx

修改完权限后，重启 Nginx 服务以应用新的配置：

sudo systemctl restart nginx

确认 Nginx 配置

确保你的 Nginx 配置文件路径正确且没有其他语法错误。可以使用以下命令检查 Nginx 配置文件的语法：

sudo nginx -t

如果配置正确，输出应该类似于：

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok nginx: configuration file /etc/nginx/nginx.conf test is successful

访问依然403

为什么访问还是403 server { listen 8080; server_name 172.16.105.65;

root /var/www/vue_project/dist; index index.html;  location / {     try_files $uri $uri/ /index.html; }  error_page 500 502 503 504 /50x.html; location = /50x.html {     root /usr/share/nginx/html; }

}

检查 SELinux 设置

有时候，SELinux（Security-Enhanced Linux）会阻止Nginx访问目录。你可以暂时禁用SELinux来测试问题是否出在这里。

暂时禁用SELinux： sudo setenforce 0
重启Nginx： sudo systemctl restart nginx
重新访问网站，看看问题是否解决。如果问题解决了，可以将SELinux设置为宽松模式，允许Nginx访问指定目录：运行以下命令，允许Nginx访问指定目录： sudo chcon -R -t httpd_sys_content_t /var/www/vue_project/dist
重新启用SELinux：

sudo setenforce 1

检查文件夹权限

确保上级目录的权限也允许Nginx用户读取。例如：

sudo chmod 755 /var/www/vue_project sudo chmod 755 /var/www

检查Nginx访问日志和错误日志

查看Nginx访问日志和错误日志，查找更多的错误信息：

sudo tail -f /var/log/nginx/access.log sudo tail -f /var/log/nginx/error.log

检查防火墙设置

确保防火墙没有阻止端口8080的访问：

sudo firewall-cmd --permanent --add-port=8080/tcp sudo firewall-cmd --reload

检查SELinux

使用 sestatus 命令检查SELinux状态：

sestatus

如果SELinux处于启用状态，可以使用以下命令更改文件上下文：

sudo chcon -R -t httpd_sys_content_t /var/www/vue_project/dist

修改Nginx用户

在 /etc/nginx/nginx.conf 中确认Nginx是以哪个用户运行的，并确保目录权限正确：

user nginx;

重启Nginx并测试

再次重启Nginx并测试：

bash

复制代码

sudo systemctl restart nginx

后续

如何避免出现这种问题 chunk-vendors.d239ea38.js:6 Mixed Content: The page at 'https://7d9d12b0.r16.vip.cpolar.cn/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://172.16.105.65:8101/api/user/get/login'. This request has been blocked; the content must be served over HTTPS.

要避免 Mixed Content 问题，你需要确保所有请求都通过 HTTPS 进行。以下是解决该问题的步骤：

1. 配置 Nginx 支持 HTTPS

你需要为你的阿里云服务器配置 HTTPS。这包括获取 SSL 证书并配置 Nginx 使用该证书。

获取 SSL 证书

你可以使用免费的 Let's Encrypt 证书或从其他证书颁发机构购买证书。这里以 Let's Encrypt 为例：

安装 Certbot（Let's Encrypt 的客户端）：

sudo yum install epel-release -y sudo yum install certbot python2-certbot-nginx -y

获取并安装证书：

sudo certbot --nginx

按照提示完成证书的安装过程。

配置 Nginx 使用 HTTPS

打开 Nginx 配置文件：

sudo vi /etc/nginx/nginx.conf

添加或修改 server 块以支持 HTTPS：

http { ... server { listen 80; server_name 47.121.116.101; # Redirect all HTTP requests to HTTPS location / { return 301 https://$host$request_uri; } } server { listen 443 ssl; server_name 47.121.116.101; ssl_certificate /etc/letsencrypt/live/your_domain/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/your_domain/privkey.pem; ssl_protocols TLSv1 TLSv1.1 TLSv1.2; ssl_ciphers HIGH:!aNULL:!MD5; location / { proxy_pass http://172.16.105.65:8080; # 假设 Spring Boot 应用运行在 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; } } server { listen 8101 ssl; server_name 47.121.116.101; ssl_certificate /etc/letsencrypt/live/your_domain/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/your_domain/privkey.pem; ssl_protocols TLSv1 TLSv1.1 TLSv1.2; ssl_ciphers HIGH:!aNULL:!MD5; location / { proxy_pass http://172.16.105.65:8101; # 假设另一个服务运行在 8101 端口 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; } } ... }

2. 修改前端代码使用 HTTPS

确保前端代码中的请求 URL 也使用 HTTPS：

const baseUrl = process.env.NODE_ENV === "development" ? "https://47.121.116.101:8101" : "https://47.121.116.101:8101"; OpenAPI.BASE = baseUrl;

3. 配置安全组

确保在阿里云控制台的安全组设置中，443 和 8101 端口已经对外开放。

4. 检查 Nginx 配置并重启 Nginx

检查 Nginx 配置是否正确：

sudo nginx -t

如果没有错误，重启 Nginx：

sudo systemctl restart nginx

通过这些步骤，可以确保所有请求都通过 HTTPS 进行，从而避免 Mixed Content 问题。

部署项目--nginx--403

部署项目--nginx--403