More than 3 years have passed since last update.

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

Posted at 2020-11-30

目的

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

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

環境構築 ~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です。

環境構築 ~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です。

http://(IPv4アドレス)/swagger-editor/に遷移