Nuxt完全な静的サイトをDigitalseaで配備する方法

開始前

If you don't have an account yet, you can register here: https://cloud.digitalocean.com/registrations/new!

ステップ1 -あなたの液滴を作成します

In our case, for IS ! MY BUG, we have decided to try a standard droplet ($10/month it might be enough).

We recommend to use SSH keys, for security purposes

ステップ2 -独自のドメインを追加

If you have any problems related to the DNS management I recommend you to take a look at How to Create, Edit, and Delete DNS Records.

ステップ3 -あなたの液滴に接続ssh

ssh root@DROPLET_IP_ADDRESS

When you finished creating your droplet an IP address would be generated, that's the one you have to use after the @.

ssh -i /path/key username@DROPLET_IP_ADDRESS

Enter passphrase for key '/c/Users/USER/.ssh/key':

ステップ4 -私たちのnuxtjsプロジェクトを実行するnginxを設定します

  cd /var/www/
  mkdir domain.io

  cd /var/www/domain.io
  mkdir html

  cd /etc/nginx/sites-available/
  cp default domain.io
  sudo nano domain.io

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

    root /var/www/html;

    index index.html index.htm index.nginx-debian.html;

    server_name hellonode;

    location ^~ /assets/ { 
      gzip_static on;
      expires 12h;
      add_header Cache-Control public;
    }

    location / {
      ...
      proxy_pass http://localhost:3000;
    }
  }

  error_page 404 /200.html;

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

    root /var/www/domain.io/html/dist;
    index index.html index.htm index.nginx-debian.html;

    server_name domain.io www.domain.io;

    error_page 404 /200.html;

    location / {
    }
  }

  // Create a symbolic link to have the same content in both
  sudo ln -sf /etc/nginx/sites-available/domain.io /etc/nginx/sites-enabled/domain.io
  rm /etc/nginx/sites-available/default /etc/nginx/sites-enabled/default

  sudo nginx -t // Test configuration
  sudo nginx -s reload

ドメイン名.io ステップ5 - Gitを使用して自動化を展開する

  cd /var/www/domain.io/html
  git init

  cd ..
  mkdir repobare

  cd repobare
  git init --bare

  sudo nano hooks/post-receive

  #!/bin/bash
  git --work-tree=/var/www/domain.io/html --git-dir=/var/www/domain.io/repobare checkout -f
  cd /var/www/domain.io/html
  npm install
  npm run generate

  sudo chmod +x hooks/post-receive

  git remote add <deploy_origin> root@<DROPLET_IP_ADDRESS>:/var/www/domain.io/repobare
  git add .
  git commit -m "First commit"
  git push <deploy_origin> master

When you run git push it will ask you for the SSH passphrase, fill in and press Enter.

ギタブアクション 付録-パフォーマンス向上

SSL認証

sudo apt install certbot python3-certbot-nginx

sudo certbot --nginx -d www.domain.io -d domain.io

Output
Please choose whether or not to redirect HTTP traffic to HTTPS, removing HTTP access.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
1: No redirect - Make no further changes to the webserver configuration.
2: Redirect - Make all requests redirect to secure HTTPS access...
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Select the appropriate number [1-2] then [enter] (press 'c' to cancel): 2

It includes a renewal process, if you want to test it go to Verifying Certbot Auto-Renewal.

[email protected] 2 .キャッシュポリシー

sudo nano /etc/nginx/sites-available/domain.io

# Expires map
map $sent_http_content_type $expires {
    default                    off;
    text/html                  epoch;
    text/css                   max;
    application/javascript     max;
    ~image/                    max;
}

server {
    ...

    expires $expires;

    root /var/www/domain.io/html/dist;
...

sudo nginx -s reload

curl -I https://domain.io/index.html

If you want more information about it, go to How to Implement Browser Caching.

エンコードを受け入れる

sudo nano /etc/nginx/nginx.conf

...
##
# `gzip` Settings
#
#
gzip on;

gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_min_length 256;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype image/svg+xml image/x-icon;
...

sudo nginx -s reload

curl -H "Accept-Encoding: gzip" -I https://domain.io/index.html

If you want more information about it, go to How To Add the gzip Module to Nginx.

結果