Ubuntu系统部署前端项目

原创于 2025-10-15 14:15:00 发布 · 118 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ubuntu #linux #运维 #前端 #nginx站点

1. 下载nginx

从软件源同步最新的软件包列表

sudo apt update

安装nginx

sudo apt install nginx

启动nginx

sudo systemctl start nginx

设置nginx开机自启动

sudo systemctl enable nginx

查看nginx服务状态(有 active (running) 字样代表正常运行)

sudo systemctl status nginx

2. 放置前端项目文件（默认为dist目录）

cd /var/www
sudo mkdir 项目名

///// 以下几步root用户可忽视

// 检查目录权限
ls -ld /var/www/项目名

// 修改文件 / 目录的所有者和所属组
sudo chown -R ubuntu:ubuntu /var/www/项目名

// 不同用户对这个目录能执行哪些操作
sudo chmod -R 755 /var/www/项目名

完成命令后可上传dist文件夹到目录

3. 配置nginx站点

创建Nginx 站点配置文件

sudo nano /etc/nginx/sites-available/项目名

内容参考：

server {
    # 监听端口（默认80，若用HTTPS则需配置443）
    listen 80;
    # 你的域名或服务器IP
    server_name 你的域名或服务器IP;

    # 网站根目录（指向dist文件夹）
    root /var/www/项目名/dist;
    # 默认索引文件
    index index.html;

    # 处理Vue等单页应用的路由（重要！避免刷新404）
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 静态文件缓存配置（可选，优化性能）
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 30d;
        add_header Cache-Control "public, max-age=2592000";
    }

    # 日志配置（可选，方便排查问题）
    access_log /var/log/nginx/ai-crush-ui-access.log;
    error_log /var/log/nginx/ai-crush-ui-error.log;
}

启用站点配置

sudo ln -s /etc/nginx/sites-available/项目名 /etc/nginx/sites-enabled/

4. 验证并重启nginx

sudo nginx -t

sudo systemctl restart nginx（sudo systemctl reload nginx）