花开陌上

安装使用Yuelai Engine Blog - 前端

2026/5/16 08:21:21chixm2 阅读0 点赞0 评论

前端部署

前端文件创建一个web目录存放，也是在放后端系统的文件夹下创建

/opt/yuelaiengine/web

然后一样的，把准备好的前端文件上传解压。使用nuxt打包过的，解压之后是.output

先创建配置文件.env，vim /opt/yuelaiengine/web/.env。配置文件写入以下内容

BASH
NUXT_API_PROXY_TARGET=http://127.0.0.1:7777
NUXT_PUBLIC_API_BASE=/api/v1
NUXT_PUBLIC_SITE_URL=https://chixm.group

注意改写自己后端的端口信息和前端域名。

然后创建前端部分的系统服务配置

INI
[Unit]
Description=Yuelai Engine Blog Frontend (Nuxt SSR)
Wants=network-online.target
After=network-online.target

[Service]
Type=simple
User=root
Group=root
WorkingDirectory=/opt/yuelaiengine/web
ExecStart=/usr/bin/env node /opt/yuelaiengine/web/.output/server/index.mjs
Restart=always
RestartSec=5
LimitNOFILE=65535
StandardOutput=journal
StandardError=journal

Environment=NODE_ENV=production
EnvironmentFile=-/opt/yuelaiengine/web/.env

[Install]
WantedBy=multi-user.target

vim /etc/systemd/system/yuelaiengine-blog.service，写入上面的配置，注意照着下图改成自己的

因为使用的是nvm 安装的node，但 nvm 安装的 Node 通常只在当前用户的 shell 配置中可用，systemd 不会加载.bashrc/.zshrc，会出现node 命令找不到的情况。

然后在 ExecStart 前设置了个环境变量。

INI
[Service]
Environment="PATH=/root/.nvm/versions/node/v24.15.0/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin"
ExecStart=/usr/bin/env node /opt/yuelaiengine/web/.output/server/index.mjs

完成到这里，然后就是很经典的：

sudo systemctl daemon-reload

sudo systemctl enable yuelaiengine-blog

sudo systemctl start yuelaiengine-blog

前端跑起来之后，默认监听3000端口，然后nginx反向代理127.0.0.1:3000即可

如果想改端口，就在.env中加入NITRO_PORT=端口

这里端口不变，然后在nginx配置里把前端部分配置好

NGINX
server {
    listen 80;
  listen 443 ssl; 
    http2 on;
    server_name chixm.group;

    if ($scheme = http) {
        return 301 https://$host$request_uri;
    }

    # SSL 配置
    ssl_certificate /etc/nginx/ssl/chixm.group.pem;
    ssl_certificate_key /etc/nginx/ssl/chixm.group.key;
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384;
    ssl_prefer_server_ciphers off;
    ssl_session_cache shared:SSL:10m;
    ssl_session_timeout 10m;

    # 开启 Gzip 压缩
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

    location / {
        # Nuxt 程序运行在 3000 端口
        proxy_pass http://localhost:3000;
        
        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;
        
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        
        proxy_cache_bypass $http_upgrade;
        proxy_read_timeout 60s;
        proxy_connect_timeout 60s;
    }
}

以上配置可以做如下变动

然后重启nginx。

BASH
systemctl restart nginx

然后访问域名

自此，前端部署也算完成了。再去后台设置一下就能用了！

评论区