Skip to content

2. 部署

Scratcher-wrj edited this page Jun 24, 2022 · 1 revision

编译前端

$ yarn build

构建时会启用 Tree-Shaking 和 Extract CSS,以缩小构建文件体积。

部署

以下提供了很多方式部署,你可以根据自己的需求选择一种方式。

使用 NuxtJS 自带服务器部署

$ yarn start

使用 pm2 启动服务器

使用 pm2 可以使你方便的控制项目启动停止和重启,当你使用我们的 AutoDeploy 工具时,结合 pm2 可以方便的更新预览站 Deploy Nuxt using PM2
pm2 相关配置已在 ecosystem.config.js 中提供。
启动:

$ pm2 start

停止:

$ pm2 stop GitScratchFrontend

重启:

$ pm2 restart GitScratchFrontend

使用 Nginx 反向代理

使用 Nginx 可以为前端提供 GZIP 压缩和静态文件缓存功能,这将有效提高加载速度。
Using NGINX as a reverse proxy
这里是一份 Nginx 配置文件,可以自行修改。

proxy_cache_path /www/wwwroot/gitsccache levels=1:2 keys_zone=nuxt-cache:25m max_size=1g inactive=60m use_temp_path=off;

map $sent_http_content_type $expires {
    "text/html"                 1h; # set this to your needs
    "text/html; charset=utf-8"  1h; # set this to your needs
    default                     7d; # set this to your needs
}
server
{
    listen 8081;
    listen [::]:8081;
    server_name git.sc.cn;
    
    gzip            on;
    gzip_types      text/plain application/xml text/css application/javascript;
    gzip_min_length 1000;
    
    charset utf-8;

    location / {
        expires $expires;
        add_header Content-Security-Policy "default-src 'self' 'unsafe-inline';";
        add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;
        add_header X-Frame-Options "SAMEORIGIN";
        add_header X-Cache-Status $upstream_cache_status;

        proxy_redirect                      off;
        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_ignore_headers        Cache-Control;
        proxy_http_version          1.1;
        proxy_read_timeout          1m;
        proxy_connect_timeout       1m;
        proxy_pass                  http://127.0.0.1:8080; # set the address of the Node.js instance here
        proxy_cache                 nuxt-cache;
        proxy_cache_bypass          $arg_nocache; # probably better to change this
        proxy_cache_valid           200 302  60m; # set this to your needs
        proxy_cache_valid           404      1m;  # set this to your needs
        proxy_cache_lock            on;
        proxy_cache_use_stale error timeout http_500 http_502 http_503 http_504;
        proxy_cache_key             $uri$is_args$args;
    }
}