M1 Mac + Laravel + Docker + AWS でポートフォリオを作るまで[初心者][未経験]


#概要
プログラミング未経験、会社員やりながら独学している初心者です。

今回、タイトルの環境でポートフォリオを作るまでを記録していきます。

#参考


- Udemy

 - [[HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門](https://www.udemy.com/course/html-css-js/)
 - [PHP+MySQL（MariaDB） Webサーバーサイドプログラミング入門](https://www.udemy.com/course/php7basic/)
 - [PHPからLaravelまで サーバーサイドをとことんやってみよう【初心者から脱初心者へ】【わかりやすさ最重視】](https://www.udemy.com/course/phpbeginnertolaravel/)
 - [AWSで作るWEBアプリケーション 実践講座](https://www.udemy.com/course/webapplication-on-aws/)

- Youtube

 - [【Laravel講座】掲示板を作ろう!! part1 - 概要【質問回答は無料】](https://www.youtube.com/watch?v=-ZU48CRIWFU&t=9s)
 - [【Laravel入門・準備編】PHPフレームワークの種類と人気を紹介 #00](https://www.youtube.com/watch?v=cO9Kfh3lypg&list=PLCyDm9NTxdhLnA4tH5ToQR1K1LcWIAdOa)
 - [【AWS 入門】EC2とDockerでHello Worldしよう](https://www.youtube.com/watch?v=HvrIPQ77xRY)
　


- Qiita

 - [【超入門】20分でLaravel開発環境を爆速構築するDockerハンズオン](https://qiita.com/ucan-lab/items/56c9dc3cf2e6762672f4#%E3%81%94%E6%B3%A8%E6%84%8F)
 - [AWSにEC2上でdockerを使用したlaravelをデプロイ①（EC2インスタンス作成）](https://qiita.com/JXnj8uVrUkiBh90/items/463fe4a122a0c4e5d03f)
 - [EC2インスタンスにgit,docker,docker-composeを導入、公開鍵の登録(CircleCI用)](https://qiita.com/fukkatsu3/items/2a614cdaafdf956a8572)


- ドットインストール

 - https://dotinstall.com/


<h1>開発環境</h1>
<ul>
<li>M1 macbook pro</li>
<li>Docker preveiw版</li>
<li>AWS (VPC,EC2,RDS,ELB,ACM,Route53)</li>
<li>php:7.4-fpm-buster</li>
<li>nginx: 1.18-alpine</li>
<li>mariaDB</li>
<li>Laravel:6</li>
</ul>

#ポートフォリオ

####ポートフォリオサイト
~~（現在AWSのELBに証明書設定しているのですが、HTTPS接続できず苦戦中です。）~~

- https://elb.namiya-soudanshitu.com

####Github
- https://github.com/Kohei-Katashima/docker-trouble


今回作成したポートフォリオは　**悩み相談の掲示板サイト**　です。
下記でもう少し詳しく説明します。

それでは早速、ローカル環境を構築していきます。


#DockerでLaravel構築
M1 mac用のDockerはこの記事からダウンロード出来ます。
https://www.docker.com/blog/download-and-try-the-tech-preview-of-docker-desktop-for-m1/
見るのめんどくさい人はダウンロードリンク貼っときます。
[Docker Desktop for M1 (Preview7)ダウンロード](https://desktop.docker.com/mac/m1preview/Docker-AppleSilicon-Preview7.dmg)

インストールできたらこの記事を参考に構築していきます

- [【超入門】20分でLaravel開発環境を爆速構築するDockerハンズオン](https://qiita.com/ucan-lab/items/56c9dc3cf2e6762672f4#%E3%81%94%E6%B3%A8%E6%84%8F)

すると
>**データベース(db)コンテナを作る**

のところで先へ進めなくなります。
理由としては　**M1 mac** では　**Docker**　が完全に**使えるようになっていない**ためです。 <br>※2021年1月26日時点
[公式　Apple M1 技術プレビュー](https://matsuand.github.io/docs.docker.jp.onthefly/docker-for-mac/apple-m1/)
>特に mysql イメージは ARM64 において利用できません。 この状況は mariadb イメージを利用すれば解消されます。

そのため、**mysql**　ではなく　**mariadb**　を使用します。

次を参考に変更を加えていきます。

+ [dockerを使用してmariadbを構築する](https://mebee.info/2020/04/07/post-8227/)

上記を参考にしてできた　`docker-compose.yml`　がこちら

```docker:docker-compose.yml
version: "3.8"
services:
  app:
    build: ./infra/php
    volumes:
      - ./backend:/work

  web:
    image: nginx:1.18-alpine
    ports:
      - 10080:80
    volumes:
      - ./backend:/work
      - ./infra/nginx/default.conf:/etc/nginx/conf.d/default.conf
    working_dir: /work

  db:
    image: mariadb
    restart: always
    ports:
      - 3307:3306
    volumes:
      - "./mysql:/var/lib/mysql"
      - "./initdb.d:/docker-entrypoint-initdb.d"
    environment:
      - MYSQL_ROOT_PASSWORD=pwd
      - MYSQL_DATABASE=test
      - MYSQL_USER=user
      - MYSQL_PASSWORD=pwd
 
  adminer:
    image: adminer
    restart: always
    ports:
      - 8080:8080
 

```

ファイルが編集出来たら

###build & up　する


```
% docker-compose up -d --build
```
正常に起動したらコンテナを一覧表示してみます。

```
% docker-compose ps  

          Name                        Command               State           Ports         
------------------------------------------------------------------------------------------
docker-trouble_adminer_1   entrypoint.sh docker-php-e ...   Up      0.0.0.0:8080->8080/tcp
docker-trouble_app_1       docker-php-entrypoint php-fpm    Up      9000/tcp              
docker-trouble_db_1        docker-entrypoint.sh mysqld      Up      0.0.0.0:3307->3306/tcp
docker-trouble_web_1       /docker-entrypoint.sh ngin ...   Up      0.0.0.0:10080->80/tcp 

```

dockerが正常に起動しました。


##Laravelを表示
http://127.0.0.1:10080


####データベース接続

`backend/.env`を編集します。

```backend/.env

DB_CONNECTION=mysql
DB_HOST=db
DB_PORT=3306
DB_DATABASE=test
DB_USERNAME=user
DB_PASSWORD=pwd
```
+ [dockerを使用してmariadbを構築する](https://mebee.info/2020/04/07/post-8227/)

こちらをまんま参考にしていれば、この設定でLaravelとデータベースを接続できます。

http://localhost:8080/

#掲示板を作成する
続いて掲示板を作っていきます。
参考にしたのはこちら

Udemy

- [[HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門](https://www.udemy.com/course/html-css-js/)
- [PHP+MySQL（MariaDB） Webサーバーサイドプログラミング入門](https://www.udemy.com/course/php7basic/)
- [PHPからLaravelまで サーバーサイドをとことんやってみよう【初心者から脱初心者へ】【わかりやすさ最重視】](https://www.udemy.com/course/phpbeginnertolaravel/)

Youtube

- [【Laravel講座】掲示板を作ろう!! part1 - 概要【質問回答は無料】](https://www.youtube.com/watch?v=-ZU48CRIWFU&t=9s)

- [【Laravel入門・準備編】PHPフレームワークの種類と人気を紹介 #00](https://www.youtube.com/watch?v=cO9Kfh3lypg&list=PLCyDm9NTxdhLnA4tH5ToQR1K1LcWIAdOa)


ひたすら手を動かしながら掲示板を作っていきました。
※Laravel: 6.x で作成しています。

#作成理由
プログラミングを勉強していく中で、たくさんの壁にぶつかり、たくさん検索しました。
　※無料で情報がたくさん出ている時代で良かったです。
しかし、完全独学で周りにも相談できる人もいないため、本当に分からない時は優良そうな本や教材を購入したりで勉強しています。
まあ世の中には悩みがたくさんあって、それを投稿できるプラットフォームがあれば良いよね、的な考えと東野圭吾の小説を読んだので作成しました。
（東野圭吾の小説のタイトルを参考に勝手にアプリ名にしています。）

#機能紹介

###悩み相談掲示板

- **ユーザー関連**
 - ユーザー新規登録機能、ログイン、ログアウト機能
 - ユーザー情報登録、編集機能
- **投稿関連**
 - 投稿CRUD
 - 画像投稿
 - コメント機能、コメント数表示
 - 検索機能
 - タグ付け機能
- **お問い合わせ機能**
 - 確認画面表示
 - お礼画面
 - 自動メール送信機能
- **デザイン**
 - Bootstrap
 - レスポンシブデザイン

####Github
- https://github.com/Kohei-Katashima/docker-trouble


#####TOP画面![スクリーンショット 2021-01-31 17.08.00 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/885214/03774b49-60a8-2c72-ec3a-d3547b08a4d7.png)


####掲示板![スクリーンショット 2021-01-28 23.23.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/885214/19d1c416-2a4f-9d5c-4709-b33492f7cde0.png)


####詳細ページ![スクリーンショット 2021-01-28 23.24.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/885214/ad557e10-2473-99ea-2067-9a0169966e8c.png)


####コメント機能![スクリーンショット 2021-01-28 23.25.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/885214/62e9ef74-6cbe-dfbb-82cf-ce3b3d627714.png)

####ユーザー一覧![スクリーンショット 2021-01-28 23.25.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/885214/a2965237-0e00-a81f-f9aa-fbe87a1f24a1.png)

####ユーザー詳細画面![スクリーンショット 2021-01-28 23.27.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/885214/4c95294b-fa0d-2cb5-93ca-c02a75086f58.png)

####お問い合わせ画面![スクリーンショット 2021-01-28 23.27.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/885214/8eed701f-de02-3aaf-e5ed-b9c468b7bfbf.png)


※フォロー機能がまだ実装できていません。。
　これから実装していくつもりです。

###苦労したこと
MVCの概念を理解するのに苦労しました。
またリレーションなども理解が難しく多対多の関係もまだあやしいです。タグ機能がつけられたので、フォロー機能とお気に入り機能も実装していく予定です。


次はローカル環境から本番環境にデプロイしていきます。

#AWSで構築
Qiita

- [AWSにEC2上でdockerを使用したlaravelをデプロイ①（EC2インスタンス作成）](https://qiita.com/JXnj8uVrUkiBh90/items/463fe4a122a0c4e5d03f)
- [EC2インスタンスにgit,docker,docker-composeを導入、公開鍵の登録(CircleCI用)](https://qiita.com/fukkatsu3/items/2a614cdaafdf956a8572)

Udemy

- [AWSで作るWEBアプリケーション 実践講座](https://www.udemy.com/course/webapplication-on-aws/)

Youtube

- [【AWS 入門】EC2とDockerでHello Worldしよう](https://www.youtube.com/watch?v=HvrIPQ77xRY)

続いてはこちらを参考に進めていきます。
私は無料枠の`Amazon Linux 2 AMI (HVM), SSD Volume Type`にてインスタンス作成しました。

###1.EC2インスタンスに接続

```
ssh -i "[プライベートキーファイル名]" ec2-user@[パブリック IP]
```


### 2.EC2 インスタンスに　git インストール
 yum update しておきます

```
$ sudo yum update -y 
```
 git インストール

```
$ sudo yum install git
```
git初期設定

```
$ git config --global user.name [ユーザー名]
$ git config --global user.email [メールアドレス]
```

設定確認

```
$ git config --list | grep user

user.name=[ユーザー名]
user.email=[メールアドレス]
```

上記のようになっていればOKです。

###3.docker インストール

- [EC2インスタンスにgit,docker,docker-composeを導入、公開鍵の登録(CircleCI用)](https://qiita.com/fukkatsu3/items/2a614cdaafdf956a8572)

この記事を参考にEC2にdockerをインストールします。

>```
sudo yum install -y docker
# docker サービスの起動
sudo service docker start
# ec2-user を docker グループに追加する
sudo usermod -a -G docker ec2-user
```

###4.docker-compose インストール

>```
# suに変更
sudo -i
#Compose インストール
curl -L "https://github.com/docker/compose/releases/download/1.27.4/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
# 実行権限付与
chmod +x /usr/local/bin/docker-compose
# su解除
$ exit
# docker-compose バージョン確認
$ docker-compose --version
$ docker-compose version 1.16.1, build 6d1ac21
```

[AWSにEC2上にdockerを使用したlaravelをデプロイ④（gitクローン〜デプロイ、マイグレーション）](https://qiita.com/JXnj8uVrUkiBh90/items/65f55ad1f79f32f26547)

上記記事同様に　`docker-compose.yml`　を書き換えます。

```docker:docker-compose.yml
version: "3.3" ←変更
services:
  app:
    build: ./infra/php
    volumes:
      - ./backend:/work
〜
```

###5.EC2 インスタンスでdocker 起動

- gitをクローン

```
[ec2-user@ip-プライベート IP ~]$ git clone [githubのURL]
[ec2-user@ip-プライベート IP ~]$ cd ディレクトリ名
```

- dockerコンテナ立ち上げ

```
[ec2-user@ip-プライベート IP ディレクトリ名]$ docker-compose up -d
[ec2-user@ip-プライベート IP ディレクトリ名]$ docker-compose ps
         Name                        Command               State           Ports         
-----------------------------------------------------------------------------------------
dockertrouble_adminer_1   entrypoint.sh docker-php-e ...   Up      0.0.0.0:8080->8080/tcp
dockertrouble_app_1       docker-php-entrypoint php-fpm    Up      9000/tcp              
dockertrouble_db_1        docker-entrypoint.sh mysqld      Up      0.0.0.0:3307->3306/tcp
dockertrouble_web_1       /docker-entrypoint.sh ngin ...   Up      0.0.0.0:10080->80/tcp 
```

AWSでもローカルと同じように起動しました。

###6.Laravel環境を作る
[AWSにEC2上にdockerを使用したlaravelをデプロイ④（gitクローン〜デプロイ、マイグレーション）](https://qiita.com/JXnj8uVrUkiBh90/items/65f55ad1f79f32f26547)
またまたこの記事を参考に進めます。

この記事のまま進めていけばパブリックIPでアクセスできるようになります。
> http://[設定したElastic IPアドレス]:10080にブラウザからアクセスします。

私の掲示板は画像投稿の機能があるので、さらに書き加えます。

```
root@0522095ee210:/work# php artisan storage:link
root@0522095ee210:/work# chown -R www-data:root .
```
これで画像投稿も可能になります。

以上で、とりあえず**本番環境で公開**できました。

---
###終わりに
長くなってしまいましたが、とりあえず**未経験初心者**でも **M1 Mac** でプログラミングをしていくことは可能でした。
情報のないエラーもとことん検索して、いろんなバグの現象と組み合わせて解析したらなんとかなることもあるので、根気強くコードを読むのも大事だと思いました。

まだまだ初心者、未経験なので、さらに勉強して知識をつけつづけます。


---
###メモ代わり
以下、続きの設定をしていきます。

引き続き

- [AWSで作るWEBアプリケーション 実践講座](https://www.udemy.com/course/webapplication-on-aws/)

こちらを参考に進めていきます。

#独自ドメインでhttps接続

###1.[RDS]データベース構築
AWSのRDSでデータベースを構築します。
###2.[ELB]作成
ターゲットグループ,ロードバランサーを作成していきます。
###3.Route53設定
私は　[お名前.com](https://navi.onamae.com/top)　でドメイン取得しました。
取得したものをRoute53に設定していきます。
###4.ACMで証明書発行
証明書を発行したものをELBに設定します。
設定しましたが、httpsで接続でず苦戦中です。



#現状以上です。

S3やCloudFront、オートスケールも使用していくつもりです。

ありがとうございました。