自作WEBアプリ

自作WEBアプリの公開準備　XserverVPS 登録・設定

  /

自作WEBアプリを公開するために必要なサーバの準備について解説します。
Linuxサーバを操作することになるため、Linuxサーバの操作ができる方を対象としています。

Contents
  1. VSPとは
  2. 申込手順と確認
  3. 独自ドメインの取得と設定
  4. SSL証明書の取得
  5. 最後に

VSPとは

VPSとは仮想専用サーバのことです。専用なので、どんなOSを入れるか、どんなソフトウェアを入れるかなどを自由に選択できます（その分扱うための知識が必要）。似たサービスでクラウドサーバ、レンタルサーバがあります。クラウドサーバはVPSより自由度が高く、CPUやメモリの拡張などさらに幅広いことができます。その分、VPSより使用量が高くなります。レンタルサーバは、共用サーバと呼ばれ、OSや入れられるソフトウェアは固定となります。今回は、自作のWEBアプリを公開するために、自由かつ比較的低コストで使用できるVPSの使用方法を紹介します。

申込手順と確認

Xserver VPSのページのお申込みフォームから申し込みを行います。アカウントを新規作成し、サーバ名の設定、タイプ（メモリやCPUコア数）、OSなどを選択し、申請を行います。ssh keyでキーを作成する（自動生成）を選ぶと便利です。キーはサーバへのアクセス時に使用するので忘れずにダウンロードしてください。

申し込み完了後の確認

申し込み完了後、「アカウントの発行を一時保留」というメールが届く場合があります。この場合は、そのメールに返信しないと、サーバの作成が止まってしまうため、申し込み完了後はメールを確認しましょう。サーバが作成されたら、VPSパネルからサーバのIPアドレスを確認し、sshで接続ができるか確認してみましょう。

SSH接続できない場合

接続できない場合は、VPSパネルから接続許可ポートを確認してみましょう。SSH(22)をONにする必要があります。

独自ドメインの取得と設定

独自ドメインは必須ではないですが、無料でSSL証明書を取得するために必要です。　Xserver Domainから好きなドメインを取得してください。

DNS設定

ドメインが取得できたら、Xserver VPSの管理画面にログインし、DNSを設定します。DNS設定から取得したドメインが見れるはずなので、選択するを押します。その後、DNSレコード設定の追加からホスト名（～.com）、種別（A）、内容（VPSサーバのIPアドレス）とホスト名（www.～.com）、種別（A）、内容（VPSサーバのIPアドレス）の2つのレコードを追加します。

DNS設定の確認

次に、VPSサーバでHTTPリクエストを受けられるように設定が必要です。VPSサーバへsshして、apacheなどをインストールして動かしておきます。次に、VPSの管理画面から、HTTPポートの接続を許可します。これで、ブラウザから～.comにアクセスして、apacheの初期画面が見れたら、設定完了です。

SSL証明書の取得

最後に、HTTPSで通信できるように設定をします。これにはSSL証明書が必要です。Xserver SSLから、無料証明書として、Let’s Encryptが申し込めます。

申込時の注意点

申し込みの際は、www.～.comで申し込むことで、～.comでもアクセスが可能になります。
申込だけでは、証明書は取得できません。その後に、Xsever SSLの管理画面から、証明書を取得する必要があります。証明書取得の際は、今回の手順では、サーバの設定を完了していないので、DNSからの設定が楽です。Xserver VPSの管理画面に入り、DNS設定→設定したいドメインを選択し、SSLの証明書取得の手順で、表示されたレコードを追加します。DNSの設定が反映されるのには数時間かかるため、しばらく待ってから、再度SSLの証明書取得を行います。

証明書取得後の流れ

証明書が取得できたら、VPSサーバにscpなどで転送します。この際にも、VPSの管理画面から接続許可ポートをONにする設定が必要です。転送できたら、HTTPサーバソフト（apacheやnginx）に証明書を登録すれば、HTTPS接続が可能になります。

Nginxに証明書を登録

Nginxで証明書を設定する方法を紹介しておきます。まず、NginxをVPSサーバにインストールします。次に、中間証明書をサーバ証明書と結合してあげます。

cat letsencrypt～.crt letsencrypt～Int.crt > letsencrypt～.crt

とすれば結合できます。その後、

vi /etc/nginx/conf.d/ssl.conf

として、

server {
listen 443;
server_name www.～.com;

ssl on;
ssl_certificate /証明書のパス/letsencrypt～.crt;
ssl_certificate_key /証明書のパス/letsencrypt～.key;
}

を追記して、nginxを再起動すれば、

sudo systemctl restart nginx

https接続ができるようになるはずです。

最後に

HTTPSの接続ができれば、自作のWEBアプリの公開準備は完了です。今後は、アプリの作製方法なども紹介していけたらと思います。