初心者 AWS EC2にFlaskアプリケーションアップロードした。

## はじめに
今回AWS上に作ったサーバは、記事公開とともに閉じましたので接続できません。
が、この記事どおりにすればAWS EC2でサーバーを建てる体験ができます。

## 使うもの
◎買う↓
windowsPC
ネットワークつながるとこ

◎無料で作る↓
AWSアカウント
クレジットカード

◎PCにインストールする
powershell
Cursor エディタ VScodeでOK
クローム ブラウザ

## AWS EC2で稼働させてみるアプリ

https://qiita.com/SHIJIMI_EN/items/e9bb7a9968739a3b6f61

## awsアカウント作成
クレジットカード登録

## EC2 キーペア作成
コンピューティングへ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882753/ae1ec183-d10b-1684-d45c-6b1fd029bfde.png)

EC2を選択
キーペアを選択 AWS上の仮想コンピュータにアクセスするための鍵
AWS側でもつパブリックキー 自分のアカウントでもつプライベートキー 2つある
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882753/78396ef6-24b1-af5a-fc70-b5a614635e40.png)

キーペア作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882753/2e7bc2b2-3b8d-09ca-e373-3d954887a86f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882753/3c0437c2-201e-fd47-ecd4-37e545bcfdd3.png)

キーペア作成をクリック
プライベートキーが自動でDLされる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882753/de38d191-0fcd-9773-daad-3cbdf26db45d.png)

.sshフォルダを作って入れとこう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882753/560d0265-4181-beaf-b37e-0cb43fbec49c.png)

EC2ダッシュボードへ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882753/979213eb-1045-7778-5d2e-60704c6c436b.png)

インスタンスを起動をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882753/0274bbea-5d8b-8b74-6f8c-b9c9633f4043.png)

これから作るコンピューター名を入力。
OSはubuntuを選択する。（任意）
マシンイメージを選択する。(無料枠とそうじゃないかわかれているよ。)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882753/b786e3dc-ec1a-6f40-2919-1b0c51afcd5a.png)

インスタンスタイプ選択。(無料枠とそうじゃないかわかれているよ。)
キーペア選択（さっき作ったやつを選択）

ネットワーク設定
AWS上にwebアプリサーバー建てるのでHTTPSとHTTPのトラフィック許可。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882753/519f616a-0584-4d07-a475-9f7443aaa0f5.png)

ストレージ設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882753/037331be-a8da-795d-e8de-e29291e5cb34.png)

インスタンスを起動

## SSH接続してみる
今立ち上げたインスタンスを確認
インスタンスIDをクリック

接続をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882753/7758339d-acca-b2a1-e555-f45e8914eb8c.png)

SSHクライアントを選択
いまからAWS上に作ったarisa_serverにSSH接続する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882753/6758fee9-5701-f0b8-8cb5-cceb60711ac7.png)

ここコピーする↑

## ポート開放
ポート5000番をwebアプリケーションの窓口とするので、開放する。
ダッシュボードのセキュリティグループ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882753/eecbfb02-03e9-91c8-deee-ae7107cba9e7.png)

セキュリティグループを編集 ここでポート開放を行う
launch-wizard-1を選択 セキュリティグループIDをクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882753/4c7fcb88-772f-9d6d-4e8c-29caf30451c6.png)

インバウンドルール編集

インバウンドルールというのが クライアントからAWSへの接続口。 基本的に全て閉じられている。設定で開けてあげる。
アウトバウンドルールというのが AWSからクライアントへの出口。すべて空いている。設定で閉じてあげる。今回は設定しない。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882753/c5778561-c96d-55d5-5549-de124a8b4af7.png)

ルールを追加押して5000を追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882753/9cd904a9-4d1a-875f-41e9-ea61824c6a50.png)

保存

インスタンスの詳細画面のセキュリティ行ったら、5000番がインバウンドルールに追加されているのがわかる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882753/9971802f-1d60-5f13-7503-fa7b99bbbf13.png)


## powershell起動
キーを格納したディレクトリに変更する。
```
ssh -i "./.ssh/aws_arisa.pem" ubuntu@ec2-54-206-71-142.ap-southeast-2.compute.amazonaws.com
```

./.ssh/aws_arisa.pem  ここの部分ですね。
コマンド実行

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882753/aef92c2b-26c5-1d29-0707-8d0fef9a0a23.png)

これYes ホントにここに接続していい？と問われています。
接続失敗したらもいっかい接続コマンド実行。

↓接続成功画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882753/eb0d3d26-d199-aeb7-60f5-f6fff66599d3.png)

python インストール
```
sudo apt install python-is-python3
```

※vim操作方法
Esc → i 編集モード
Esc→：→wq→Enter 保存+閉じる

## windowsのCusorエディタからAWSサーバーで開発する
windowsでCusor開く
拡張機能出す。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882753/2ff53bc6-30e7-6c4e-eae8-f4f1920412f6.png)

remote ssh インストール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882753/38fa2019-6a34-bbac-4fce-792929e2e41e.png)

Cursor再起動
するとサイドバーにリモートエクスプローラー出現
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882753/98716aca-5953-7087-b672-b97eaa6a25ba.png)

SSHの、"+"ボタン押す。
arisa_serverへのSSH接続文入力
```
ssh -i "./.ssh/aws_arisa.pem" ubuntu@ec2-54-206-71-142.ap-southeast-2.compute.amazonaws.com
```

アップデートするconfigファイルが選択できる
自分のユーザー名のやつを選択する。

AWSのインスタンスが表示される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882753/162f6efd-a378-341a-335f-a731b285bff3.png)

ここクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882753/4ca839ed-0b79-f71d-8b00-e5ba1b4d3306.png)

ubuntuサーバーなのでLinuxを選択する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882753/5414a26e-29c7-189c-d001-03d5bae0a9d2.png)

待つ

エディタの左下がこれになったらエディタからAWSへ接続完了
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882753/02694835-869e-d5db-8ae1-c175202a501d.png)


フォルダーを開く

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882753/2a1646a2-4433-c95f-69cd-2089b35ac12a.png)

OK押す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882753/0ee63537-612f-0a29-d61b-dc2031ce45a9.png)

ubuntuサーバーの中身が階層構造で見える化
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882753/4568f9bf-05a1-e71a-5046-43fedff5fec2.png)


ターミナル表示
左上の三点メニューから表示→ターミナル
ターミナルコマンドうつ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882753/6a47a9b9-74a0-a232-0193-9f330aac513c.png)

必要なライブラリインストール
```
sudo apt update 
```
```
sudo apt install python3-pip
sudo pip install flask
sudo apt install python3-venv -y
```


アプリをダウンロード(git clone)
```
git clone https://github.com/arisaEN/kajiApp.git
```
gitがインストールされていないならばえらーがおきます。gitをインストールしてください。

```
cd kajiApp
```
仮想環境作成
```
python3 -m venv myenv
source myenv/bin/activate
```
ライブラリインストール
```
pip install -r requirements.txt
pip install pandas
pip install matplotlib
```

flask起動 ここでsudoコマンドをつけると仮想環境が無視されるため sudoつけない
```
flask --app flaskr run --port 8080 --host 0.0.0.0
```

成功
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882753/c20497c2-36fb-47c8-7928-be78abbe32fb.png)

awsのコンソール画面戻る
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882753/66ba19ee-79e8-68a2-56b7-07c1325ac918.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882753/93969e7f-3bb8-5867-6eb2-d6bc692780dd.png)

パブリックIPアドレスで他端末から接続してみる。
私の場合だと、
http://52.65.153.29:5000
でアクセス。

接続できました。成功です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882753/59615dc0-5fb3-0661-17b8-de885fe20b4f.png)


## 感想
これから私が理解しないといけないこと↓
SSH接続
webサーバ・webアプリサーバを建ててアプリを配信する方法
AWS LambdaとEC2のち