Vue3アプリケーションをデプロイする

Vue3アプリケーションをデプロイする

100 件の Vue3 ケース カタログ

構築する

npm run build

サーバーにアップロードする

注: Meow は WSL を使用してここにアップロードされます。

scp -r "/mnt/c/Users/anie/Desktop/github/abc/dist" "[email protected]:/tmp"

nginxを使用する

まずプロジェクトを nginx ディレクトリにコピーします。

sudo mv /tmp/dist /var/www/html/dist

nginx 設定ファイルを作成します: $sudo vim /etc/nginx/sites-available/abc、abc次のものを取るだけです:

# web socket
map $http_upgrade $connection_upgrade {
    default upgrade;
    ''      close;
}

server {
    listen 443 ssl;
    server_name example.com;
    ssl_certificate  example.com_bundle.crt;
    ssl_certificate_key example.com.key;
    ssl_session_timeout 5m;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_prefer_server_ciphers on;


    location / {
        root /var/www/html/dist;
        index index.html;
        try_files $uri $uri/ /index.html;
    }

    location  /api/ {
        include proxy_params;
        client_max_body_size       10m;
        client_body_buffer_size    128k;
        proxy_pass http://127.0.0.1:8000;
    }

    location /api/chat/ws {
        proxy_http_version 1.1;

        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $connection_upgrade;

        proxy_pass http://127.0.0.1:8000/api/chat/ws;
    }
}

server {
    listen 80;
    server_name example.com;
    return 301 https://$host$request_uri;
}

次に、ソフト リンクを作成します。

ln -s /etc/nginx/sites-available/abc /etc/nginx/sites-enabled/abc

注: https を使用する必要がある場合は、証明書を/etc/nginxディレクトリ(他のファイルは省略されます)。構成は上記のとおりです。

root@ubuntu:~$ tree /etc/nginx/
/etc/nginx/
├── conf.d
├── sites-available
│   ├── default
│   └── abc
├── sites-enabled
│   ├── default -> /etc/nginx/sites-available/default
│   └── abc -> /etc/nginx/sites-available/abc
├── example.com_bundle.crt #<---------证书
├── example.com.key        #<---------

ウェブサイトを鑑賞し始める