DigitalOceanでサーバー構築、ドメイン取得、SSL証明書取得

# 概要
仮想サーバーを契約できるDigitalOceanを用いてWebサーバーを構築し、ドメイン設定、SSH取得までを行う

# DigitalOceanで仮想サーバーを用意する

## 会員登録から新規プロジェクト作成まで
下記より、会員登録をする

https://www.digitalocean.com/

会員登録完了後、`NewProject`から新しいプロジェクトを作成する
※ Safariでは何故か会員登録後のwelcomeページから永遠に進めなかったため、Chromeで作業した

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/717281/aeec132a-d64d-f634-1927-4b6d114d430b.png)

プロジェクト名、説明、目的を設定する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/717281/b2cdbfa4-a07e-aacc-aa27-ffb8d8663b5f.png)

既存の何かを持ってくるわけではないのでskip

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/717281/296b8fff-2bd3-4354-2577-3c551da631d0.png)

## サーバーの設定

新しいプロジェクトが用意されたので仮想サーバーを作成する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/717281/f610e08a-1f23-dabe-4d3f-33873852bfd1.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/717281/bee04a3c-952c-0bea-a698-35b6ffc1dc5f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/717281/73e7cd80-cdbc-073a-7a4e-64600c482c30.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/717281/0efa43c6-da25-4354-f92d-b4d0413523a8.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/717281/fbd71b5d-9649-81fb-5ec6-8d02b7e5aa70.png)

説明に従ってキーを作成し、作成したキーを設定する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/717281/c22f0e79-9c00-a3d5-a6d7-5a5e4a986511.png)

SSHキー設定後にサーバー構成を確定させる

## 作成された仮想サーバーの情報

実際にできた環境

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/717281/6bd86377-35bc-1cef-846c-3663ad679a4a.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/717281/7e8504bc-0010-7f9d-1fd2-89030d16a983.png)

# サーバーにアクセスしてみる
作成したsshキーを用いてサーバーにアクセスする

```
$ ssh -i ~/.ssh/id_rsa root@`IPアドレス`
```

サーバーにアクセスしたら、webサーバーとして利用するためにnginxをインストールする

```
$ apt update
$ apt install nginx

# nginxが動いているかを確認
$ systemctl status nginx
```

動作確認をするとactiveになっている

nginx起動後に仮想サーバーのIPアドレスにブラウザでアクセスする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/717281/19bc41f4-4402-605d-e12c-c12484b55500.png)

# ドメインを発行する
お名前.comにアクセスして、アカウントを作成する

https://www.onamae.com/

## ドメインの新規申し込み
アカウント作成後にドメインの新規申し込みをする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/717281/94c35099-bc7a-2664-98cc-4657cca4f6f1.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/717281/84f662e4-5786-13e9-277a-f36e8d3f60e8.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/717281/b99ea687-000b-4bee-5467-7c6bbf115ab6.png)
### 希望のドメインを指定する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/717281/e11dcbc7-603e-359c-522f-84774303253d.png)
### DigitalOceanの仮想サーバーを用意しているためサーバー利用は不要
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/717281/374f1f2a-a0cf-6d16-47d0-195696f29bc2.png)
### あとは画面に従ってドメインの契約をしていく

# 発行したドメインにIPアドレスを紐付ける
発行したドメインにIPアドレスを紐付けるためにDNS設定をする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/717281/9665e609-d0b0-56fa-b771-0d7d810d6651.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/717281/a6c5199c-0d1b-3d3b-1e0d-bc00c76a78e6.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/717281/d050b613-b062-ea32-2b19-5b7a0043be3f.png)
### ドメイン，サーバーのIPアドレスを用いてAレコードを設定する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/717281/cd500702-f97f-af2d-1da6-31da6e0beb6c.png)
### 上記入力後、ネームサーバーの変更にチェックを入れて確認画面へ
※ これにチェックを入れないとドメインからIPアドレスが検索されない
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/717281/6761da37-c471-1076-d219-fc158f3116ab.png)
### あとは画面に従って登録をする
※ 反映までに時間がかかります

# 暇な時間で静的なHTMLページを作成

DigitalOceanの仮想サーバーにアクセスして、ドメインにアクセスした際の静的ページを作成する

```
$ mkdir -p /var/www/`your_domain`/html
# example.comであれば
# $ mkdir -p /var/www/example/html

$ vi /var/www/`your_domain`/html/index.html
```

```index.html
<html>
  <head>
    <title>Welcome page</title>
  </head>
  <body>
    <h1>welcome to your domain page!</h1>
  </body>
</html>
```

# ドメインアクセスのためのサーバーの設定
ドメインでのアクセスがあった際にどのようなページを表示するかを設定する

```
$ vi /etc/nginx/sites-available/`your_domain`

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

        root /var/www/`your_domain`/html;
        index index.html index.htm index.nginx-debian.html;

        server_name `your_domain` www.`your_domain`;

        location / {
                try_files $uri $uri/ =404;
        }
}
```

nginxの設定も更新する

```
$ vi /etc/nginx/nginx.conf

# comment outされているのでuncomment
server_names_hash_bucket_size 64;
```

指定のページを表示させるために新たにシンボリックリンクを設定する

```
$ ln -s /etc/nginx/sites-available/`your_domain` /etc/nginx/sites-enabled/
```

nginxを再起動して変更を反映させる

```
$ systemctl restart nginx
```

この時点で作成したHTMLが表示されずnginxのデフォルトページのままの場合は`sites-available`、`sites-enabled`に`default`配下にファイルが存在している可能性がある

削除してnginxを再起動する

ブラウザより発行したドメインにアクセスする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/717281/8c1ef4bb-d797-ab46-3a5e-91c41de72bf0.png)

# SSLを設定する

雑に言えばhttpsでアクセスできるようにする
データ通信の暗号化プロトコルのためのSSL証明書の発行

今回使用するのはLet's Encryptであるため必要なものをインストールする

```
$ apt install certbot python3-certbot-nginx
```

実際にSSLを発行していく
下記のコマンドを実行するとメールアドレス等の情報入力が求められるため入力する

```
$ certbot --nginx -d `your_domain.xxx`
# ドメインがexample.comであれば
# $ certbot --nginx -d example.com
```

サイト設定に反映させる

```
$ vi /etc/nginx/sites-available/`your_domain`

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

        root /var/www/`your_domain`/html;
        index index.html index.htm index.nginx-debian.html;

        server_name `your_domain` www.`your_domain`;

        location / {
                try_files $uri $uri/ =404;
        }
        listen 443 ssl;
        ssl_certificate /etc/letsencrypt/live/`your_domain.xxx`/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/`your_domain.xxx`/privkey.pem;
        # ドメインがexample.comであれば
        # ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
}
```

最後にnginxを再起動する

```
$ systemctl restart nginx
```

作成したドメインへ`https`を先頭としたURLでアクセスする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/717281/979331d9-f1f5-b022-e201-ba49dfd10ccc.png)

# 終了