---
# System prepended metadata

title: ワークショップ実施手順
tags: [SAiTech]

---

# ワークショップ実施手順
###### tags: `SAiTech`


**本資料は，主にAWS EC2を利用した開発環境構築のワークを中心に補足するものとする.**

---

## オリエンテーション①

EC2インスタンスにおけるワークなし

---

## オリエンテーション②

[参考]

* [Amazon EC2 > Getting started tutorial](https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/EC2_GetStarted.html)
* [Remote Development using SSH](https://code.visualstudio.com/docs/remote/ssh)

### EC2インスタンスの作成

1. AWSにIAMユーザーでサインインする.
2. EC2マネジメントコンソールを開く.
3. サイドメニューの"インスタンス"を押下する.
4. 東京リージョンで"インスタンスの作成"を押下する.
   * ステップ1：Ubuntu Server 18.04 LTS (HVM), SSD Volume Type ami-0cc75a8978fbbc969 (64 ビット x86)
   * ステップ2：t2.micro
   * 確認と作成
   * 起動
5. ポップアップウィンドウで"新しいキーペアの作成"を行う.
   * 任意のキーペア名を入力
   * "キーペアのダウンロード"を押下
   * ダウンロードしたpemファイルを，ローカルマシンの `~/.ssh` 配下へ移動
6. ポップアップウィンドウで"インスタンスの作成"を押下する.
7. インスタンスIDのリンクを押下する.  
   次のインスタンスの作成が開始されました: xxxx
8. インスタンスに名前をつける.  
   ex) SAiTechEC2  
   すべてのインスタンスが同じ画面にリストされるため，本工程を確実に実施すること！

### セキュリティグループの作成

1. サイドメニューの"セキュリティグループ"を押下する.
2. "セキュリティグループを作成"を押下する.  
   * 以下の表に記載されたセキュリティグループを作成
      | セキュリティグループ名 | 情報 | VPC       | インバウンドルール                     |
      | -------------------- | ---- | --------- | ------------------------------------ |
      | SAiTech SSH          | 任意 | デフォルト | **任意の場所**からの**SSH通信を許可**   |
      | SAiTech HTTP         | 任意 | デフォルト | **任意の場所**からの**HTTP通信を許可**  |
      | SAiTech HTTPS        | 任意 | デフォルト | **任意の場所**からの**HTTPS通信を許可** |
3. EC2インスタンスに，作成したセキュリティグループをすべてアタッチする.  
   （"アクション" -> "ネットワーキング" -> "セキュリティグループの変更"）  

### VSCodeでEC2インスタンスに接続

1. SSH設定ファイルを編集する.

   ```bash
   # ~/.ssh/config
   Host [alias] # 任意のエイリアスを入力
       HostName [hostname] # マネジメントコンソールより，ホスト名をコピー
       User ubuntu
       Port 22
       IdentityFile [secretkey] # pemファイルのパスを指定
   ```

2. コマンドパレットで以下のコマンドを実行する.  
   ※事前学習で"Remote SSH"の拡張機能をインストールしていることが前提！

   ```bash
   Remote-SSH: Connect to Host...
   ```

   * 途中，コマンドパレットで入力を求められた場合は以下を選択  
     Linux  
     Continue

### Apacheサーバーのインストール

1. aptコマンドで必要なモジュールをインストールする.

   ```bash
   sudo apt install apache2
   sudo apt install libapache2-mod-php7.2
   ```

2. `mod_ssl` モジュールを有効化してApacheサーバーを再起動する.

   ```bash
   sudo a2enmod ssl
   sudo a2ensite default-ssl

   sudo systemctl restart apache2
   ```

3. WebブラウザでEC2インスタンスにアクセスし，`index.html` を表示する.

### ワークショップで作成したPHPファイルをサーバーのドキュメントルートへ転送

1. VSCode(Remote SSH)で，EC2インスタンスの `/var/www/html` フォルダを開く.
2. ローカルマシンで作成したPHPファイルをドラッグ＆ドロップで転送する.
3. WebブラウザでEC2インスタンスにアクセスし，転送したファイルの実行結果を確認する.

### EC2インスタンスとのSSH接続を切断

1. コマンドパレットで以下のコマンドを実行する.

   ```bash
   Close Remote Connection...
   ```

---

## オリエンテーション③

[参考]

* [Laravel 7.x Installation](https://readouble.com/laravel/7.x/en/installation.html)
* [Troubleshooting - Composer](https://getcomposer.org/doc/articles/troubleshooting.md)

### Laravelプロジェクトの作成

1. Laravelプロジェクトの作成に必要なモジュールをインストールする.

   ```bash
   # インストール前に既存パッケージを更新
   sudo apt update
   sudo apt upgrade

   sudo apt install zip unzip
   sudo apt install php-mbstring
   sudo apt install php-xml
   ```

2. Composerをインストールする.

   ```bash
   sudo apt install composer

   # インストールが成功しているか確認
   composer
   ```

3. スワップファイルを作成する.

   ```bash
   sudo /bin/dd if=/dev/zero of=/var/swapfile bs=1M count=3072
   sudo chmod 600 /var/swapfile
   sudo /sbin/mkswap /var/swapfile
   sudo /sbin/swapon /var/swapfile

   # メモリの使用状況を確認
   free -h
   ```

4. ニュースアプリのプロジェクトを作成する.

   ```bash
   sudo chown ubuntu. /var/www/html
   cd /var/www/html
   composer create-project --prefer-dist laravel/laravel laravel-news
   ```

5. プロジェクトルート配下のオーナー・パーミッションを変更する.

   ```bash
   sudo chown -R ubuntu:www-data laravel-news
   sudo find laravel-news -type d -print | xargs -i chmod 750 {}
   sudo find laravel-news -type f -print | xargs -i chmod 640 {}
   sudo chmod -R 770 laravel-news/storage/
   sudo chmod -R 770 laravel-news/bootstrap/cache/
   ```

6. WebブラウザでEC2インスタンスにアクセスし，Welcomeページを表示する.

---

## オリエンテーション④

[参考]

* [A Quick Guide to Using the MySQL APT Repository](https://dev.mysql.com/doc/mysql-apt-repo-quick-guide/en/)
* [Artisan Console Tinker (REPL)](https://laravel.com/docs/7.x/artisan#tinker)

### データベースの準備

1. EC2インスタンスにMySQLのAPTリポジトリを追加する.

   ```bash
   sudo apt-key adv --keyserver pgp.mit.edu --recv-keys 5072E1F5
   # もしコマンドが失敗した場合，以下のWebページに公開されているPGP PUBLIC KEYをEC2インスタンスに手動で追加する.
   # https://dev.mysql.com/doc/refman/8.0/en/checking-gpg-signature.html

   sudo add-apt-repository "deb http://repo.mysql.com/apt/ubuntu bionic mysql-8.0"
   ```

2. MySQL8.0をインストールする.

   ```bash
   # インストール前に既存パッケージを更新
   sudo apt update
   sudo apt upgrade

   sudo apt install mysql-server

   # rootユーザーの初期パスワードを設定
   # デフォルトの認証プラグインは，"Use Legacy Authentication Method (Retain MySQL 5.x Compatibility)"を選択
   ```

### CRUD処理の実行

1. データベースを作成する.

   ```bash
   mysql -uroot -hlocalhost -p
   # rootユーザーの初期パスワードでMySQLサーバーへ接続

   mysql> create database `laravel-news`;
   ```

2. テーブルを作成する.

   ```bash
   mysql> use `laravel-news`;

   mysql> create table posts (id int, title varchar(255), body text);
   ```

3. SELECT, INSERT, UPDATE, DELETEクエリを実行する.

   ```bash
   mysql> insert into posts values (1, 'title01', 'body01');
   mysql> select * from posts;

   mysql> update posts set body='updated!' where id = 1;
   mysql> select * from posts;

   mysql> delete from posts where id = 1;
   mysql> select * from posts;

   mysql> drop table posts;
   mysql> show tables;

   mysql> quit
   ```

### LaravelからMySQLへの疎通確認

1. .envファイルを編集する.

   ```bash
   # laravel-news/.env
   DB_CONNECTION=mysql
   DB_HOST=127.0.0.1
   DB_PORT=3306
   DB_DATABASE=laravel-news
   DB_USERNAME=root
   DB_PASSWORD=[password] # rootユーザーのパスワードを入力
   ```

2. tinkerでMySQLクエリを実行する.

   ```bash
   # MySQL用のドライバをインストール
   sudo apt install php-mysql

   cd [path_to_laravel_project_root]
   # ニュースアプリのディレクトリを移動していない場合，パスは"/var/www/html/laravel-news"

   php artisan tinker
   >>> DB::select('select 1');
   # MySQLへの接続に成功しているか確認

   >>> exit
   ```

---

## オリエンテーション⑤

EC2インスタンスにおけるワークなし

<br>

以上