Nginx部署前端Vue项目

• 下载
• 稳定版本：1.24.0 / 1.26.2

https://mirrors.huaweicloud.com/nginx/

• 部署

# 解压
tar -zxvf nginx-1.24.0.tar.gz

# 安装编译依赖
sudo yum install -y gcc pcre pcre-devel zlib zlib-devel openssl openssl-devel
# 或者
sudo dnf install -y gcc pcre pcre-devel zlib zlib-devel openssl openssl-devel

cd nginx-1.24.0

# 配置（指定安装目录到/usr/local/nginx）
./configure --prefix=/usr/local/nginx

# 编译和安装
make
sudo make install

# 编辑nginx配置
sudo vim /usr/local/nginx/conf/nginx.conf

找到并修改server部分：

nginx
server {
    listen       8081;        # 改为8081端口
    server_name  localhost;

    # 前端文件目录
    location / {
        root   html;          # 这里指向html目录，我们会把dist放这里
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;  # SPA应用重要配置
    }

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

4. 部署你的dist文件

# 进入nginx的html目录
cd /usr/local/nginx/html

# 备份原有文件
sudo mv index.html index.html.bak 2>/dev/null || true
sudo mv 50x.html 50x.html.bak 2>/dev/null || true

# 复制你的dist文件（假设dist在/home/user/dist）
sudo cp -r /home/user/dist/* /usr/local/nginx/html/

# 设置权限
sudo chown -R nobody:nobody /usr/local/nginx/html/
sudo chmod -R 755 /usr/local/nginx/html/

5. 启动nginx

# 检查配置语法
sudo /usr/local/nginx/sbin/nginx -t

# 启动nginx
sudo /usr/local/nginx/sbin/nginx

# 查看进程
ps -ef | grep nginx

💡 重要目录说明

安装目录: /usr/local/nginx/

配置文件: /usr/local/nginx/conf/nginx.conf

前端文件: /usr/local/nginx/html/ (放你的dist内容)

日志文件: /usr/local/nginx/logs/

# 停止nginx
sudo /usr/local/nginx/sbin/nginx -s stop
# 启动
sudo /usr/local/nginx/sbin/nginx
# 热启动，执行这个就够了！
sudo /usr/local/nginx/sbin/nginx -s reload