记一次 Vue 项目的部署

# 描述

• 今天需要把一个 web 项目部署到 ubuntu 服务器上，结果直接使用 apt install nodejs 安装的 nodejs 版本过低，导致编译失败。最后通过查看官网文档获取到了 ubuntu 最新 nodejs 的安装命令。

# 过程

• 卸载旧的 nodejs（此命令会卸载掉相关依赖包）

sudo apt autoremove --purge nodejs

• 安装 NodeJS

curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash - && sudo apt-get install -y nodejs

• 安装 yarn

curl -sL https://dl.yarnpkg.com/debian/pubkey.gpg | gpg --dearmor | sudo tee /usr/share/keyrings/yarnkey.gpg >/dev/null

echo "deb [signed-by=/usr/share/keyrings/yarnkey.gpg] https://dl.yarnpkg.com/debian stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

sudo apt-get update && sudo apt-get install yarn

• 初始化 (到项目根目录执行)

yarn install

• 编译（到项目根目录执行，完成后会生成 dist 目录）

yarn build

• 安装 nginx

apt install nginx

• 配置 nginx (编译 /etc/nginx/sites-available/default)

server {
        listen 80 default_server;
        listen [::]:80 default_server;

        # SSL configuration
        #
        # listen 443 ssl default_server;
        # listen [::]:443 ssl default_server;
        #
        # Note: You should disable gzip for SSL traffic.
        # See: https://bugs.debian.org/773332
        #
        # Read up on ssl_ciphers to ensure a secure configuration.
        # See: https://bugs.debian.org/765782
        #
        # Self signed certs generated by the ssl-cert package
        # Don't use them in a production server!
        #
        # include snippets/snakeoil.conf;

        root /var/www/html;

        # Add index.php to the list if you are using PHP
        index index.html index.htm index.nginx-debian.html;

        server_name _;

        location /api {
                proxy_pass http://localhost:8080;
        }

        location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                #try_files $uri $uri/ =404;
                alias /opt/codes/dayu-tools-arbitrage-web/dist/;
                try_files $uri $uri/ @router;
                index index.html index.htm;
        }

        location @router {
                rewrite ^.*$ /index.html last;
        }
｝

# 其它

• 重新编译前需要先删除 dist 目录

rm dist -fr

yarn build