前端部署教程（通用）

宝塔部署

1、安装 Nginx

2、创建前端项目

填写服务器的 IP 默认 80 端口不用写，但是如果想要使用其他端口就写成 IP:90。

也可以写域名 比如 xdsx.icu 未写端口默认 80 。

比如，你服务器的 IP 是 192.168.1.1 那么你在上面的 域名 可以写 192.168.1.1 当然这样写法其实等价于 192.168.1.1:80

3、创建之后打开项目的目录

不能删除的文件是 .user.ini 正常现象！

让后把 dist 目录的全部文件上传到服务器上的这个目录！

4、放行对应的端口 80

1）服务器端口（腾讯云演示）

2）宝塔端口

5、输入你服务器的 IP （或者你设置到上面 域名 ）进行访问

6、访问成功！！！

🤩🤩🤩

原生 Nginx 部署

• 安装 Nginx

• 上传工具：winscp 或者其他的能上传到服务器文件的工具都可以（当然也可以 rz 命令上传）

1、先切换到工作目录

▼
text
复制代码
cd ~

2、创建一个文件夹

▼
text
复制代码
mkdir -p project/fronted

3、查看 nginx 的配置文件的位置

4、修改配置文件

▼
text
复制代码
vi /usr/local/nginx/conf/nginx.conf

配置文件

▼
nginx
复制代码
#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;
	
    # 开启之后访问速度会变快
    #gzip  on;
    
    server {
        listen       前端运行端口;
        server_name  服务器IP 或者 域名 比如 leikooo.com 、196.168.1.1;
        root 前端项目位置;
        
        location /api/ {
          proxy_pass http://127.0.0.1:后端运行端口;
          add_header 'Access-Control-Allow-Origin' $http_origin;
          add_header 'Access-Control-Allow-Credentials' 'true';
          add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
          add_header Access-Control-Allow-Headers '*';
          if ($request_method = 'OPTIONS') {
              add_header 'Access-Control-Allow-Credentials' 'true';
              add_header 'Access-Control-Allow-Origin' $http_origin;
              add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
              add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
              add_header 'Access-Control-Max-Age' 1728000;
              add_header 'Content-Type' 'text/plain; charset=utf-8';
              add_header 'Content-Length' 0;
              return 204;
          }
        }
        
        location / {
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
    }
}

server 模块是 Nginx 配置文件中的核心模块之一

1. listen

• 作用：指定 Nginx 监听的端口号。
• 示例：listen 80;
• 解释：这里定义了 Nginx 监听的端口，例如 80 （HTTP 默认端口）或 443（HTTPS 默认端口）或者其他 90 端口。
• 注意：这个端口也就是咱们前端运行的端口

2. server_name

• 作用：定义虚拟主机的名称，也就是服务器响应的域名。
• 示例：server_name localhost; server_name localhost （这个 localhost 默认是服务器 IP）也可以直接写服务器 IP server_name 192.178.11.11
• 解释：localhost 表示本地服务器。如果你有特定域名，可以替换为你自己的域名，比如 server_name leikooo.com;。当用户访问这个域名时，Nginx 会根据此配置来处理请求。

3. root

• 作用：定义前端项目的根目录路径，指向静态文件所在的位置，也就是前面上传到的 /root/project/fronted
• 示例：root /var/www/html/myapp;
• 解释：这里指定了前端项目的根目录，即 Nginx 处理请求时，首先会从这个目录中查找文件。例如，root /var/www/html/myapp; 会指向 /var/www/html/myapp 文件夹。

5、更新 nginx 配置文件

▼
nginx
复制代码
nginx -s reload

6、放行服务器端口 80

1）服务器端口（腾讯云演示）

2）宝塔端口

Bug

按照上述流程走完之后发现报错 2024/08/21 16:39:25 [crit] 7653#0: *830 stat() "/root/project/fronted/index.html" failed (13: Permission denied), client: 42.100.136.105, server

解决方法

修改配置文件顶部的 user 选项

▼
text
复制代码
user root;

然后重新启动即可 nginx -s reload

Docker 部署

首先如果想要 Docker 部署前端项目，Docker 里面需要有一个 Nginx 但是由于 Docker 里面安装 Nginx 坑有亿点点多建议使用原生 Nginx