AWS/EC2 + nginxを使って、Swagger-ui,Swagger-editorの環境構築をする2/2

## 目的
**AWSのEC2上にnginxを経由してSwagger-ui,Swagger-editorを配置、使用できるようにします。**
かなり苦労しながら2日くらいかけて、調査、環境構築を終わらせたので、
同じように悩んでいる人の助けになれれば幸いです。

#####長くなりそうなので、二部構成にします。(今回は後編・nginx/Swagger編です)
#####前編のAWS編は([こちら][1])
[1]:https://qiita.com/wadakatu/items/c1995b392e7900c0ccd7

## 目次
- [環境構築~nginx編~](#環境構築-nginx編)
  - [EC2にnginx導入](#1ec2にnginxを導入)
  - [nginx起動](#2nginxを起動する)
  - [nginx状態確認-terminal-](#3ターミナル上でnginxの状態確認をする)
  - [nginx状態確認-web-](#4サイト上でnginxの状態確認をする)
- [環境構築~swagger編~](#環境構築-swagger編)
  - [クローン前の準備](#1swaggerクローン前の準備)
  - [githubからswaggerをクローン](#2swagger-uiswagger-editorをgithubからクローンする)
- [nginxを経由させてswaggerを表示](#nginxを経由させてswagger-uiswagger-editorを表示させる)
- [最後に](#あとがき)

## 環境構築 ~nginx編~
### 1.EC2にnginxを導入
#### 1.a EC2インスタンスをアップデート
ターミナルを起動し、EC2インスタンスにSSH接続する。
その後、下記コマンドを実行し、インスタンスをアップデートします。

```
sudo yum update
```

#### 1.b yumでnginxをインストールできるように設定
初期状態では、nginxをそのままインストールすることができません。
下記の魔法のコマンドを打つと、**yum install**でnginxをインストールすることができます。

```
sudo amazon-linux-extras enable nginx1
```

#### 1.c nginxをインストールする。
これで、準備が整いました。
下記コマンドを入力して、nginxをインストールしてください。

```
sudo yum -y install nginx
```

### 2.nginxを起動する
nginxはインストールしただけでは、まだ使用可能状態ではないので、
下記コマンドを入力して、nginxを起動します。

```
sudo systemctl start nginx
```

### 3.ターミナル上でnginxの状態確認をする

nginxが起動しているかどうか、下記コマンドを打ち込んで確認します。

```
sudo systemctl status nginx
```

```
Active: active (running) since 月 2020-11-30 10:25:07 UTC; 4min 44s ago
```
上記のようになっていればOKです。

### 4.サイト上でnginxの状態確認をする

**http://(EC2のIPv4アドレス)/**をウェブブラウザに打ち込んでください。
下記画像のように表示されればOKです。
![スクリーンショット 2020-11-30 19.31.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/838340/5c93ac04-a471-3172-3bbe-fe4720c19fdf.png)

## 環境構築 ~swagger編~
### 1.swaggerクローン前の準備
#### 1.a swaggerを格納するディレクトリを作成する

```
sudo mkdir /www
```

#### 1.b ディレクトリの権限を変更する

```
sudo chmod 777 /www
```

### 2.swagger-ui,swagger-editorをgithubからクローンする
#### 2.a gitをインストールする

```
sudo yum -y install git
```

#### 2.b 先ほど作成したディレクトリに移動する

```
cd　/www
```

#### 2.c githubからswagger-uiをクローンして取得する

```
git clone https://github.com/swagger-api/swagger-ui.git
```

#### 2.d swagger-editorをgithubからクローンして取得する

```
git clone https://github.com/swagger-api/swagger-editor.git
```

##nginxを経由させて、swagger-ui,swagger-editorを表示させる
### nginx.confをvimで開く

```
sudo vim /etc/nginx/nginx.conf
```
### nginx.confに追記する
```
server {
    listen 80;
    root /www/;
    index index.html;
    location /swagger-editor {
       alias /www/swagger-editor;
       index index.html;
    }
    location /swagger-ui {
       alias /www/swagger-ui/dist;
       index index.html;
    }
}
```

### nginxを再起動or再読み込みする

再起動

```
sudo systemctl restart nginx
```

再読み込み

```
sudo systemctl reload nginx
```

### http://(IPv4アドレス)/swagger-ui/に遷移
下記のような画面が表示されればOKです。

![スクリーンショット 2020-11-30 22.18.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/838340/1ea004bd-52e6-39e5-3206-f214cfb89adf.png)


### http://(IPv4アドレス)/swagger-editor/に遷移
下記のような画面が表示されればOKです。

![スクリーンショット 2020-11-30 22.16.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/838340/42174702-81b5-bcf9-d4f9-90c4a224f66a.png)

### あとがき
#### お疲れ様でした。以上でswagger-ui,swagger-editorの環境構築完了です。

まだまだ勉強中の身なので、記事に関して不明点、わかりづらい点などありましたら、
コメント欄にて気軽に、コメント、質問、アドバイスいただけますと幸いです。