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

17391 ワード
Mac Laravel Docker AWS M1 Mac テキストリンク

概要

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

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

参考

開発環境

  • M1 macbook pro
  • Docker preveiw版
  • AWS (VPC,EC2,RDS,ELB,ACM,Route53)
  • php:7.4-fpm-buster
  • nginx: 1.18-alpine
  • mariaDB
  • Laravel:6

ポートフォリオ

ポートフォリオサイト

（現在AWSのELBに証明書設定しているのですが、HTTPS接続できず苦戦中です。）

Github

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

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

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)ダウンロード

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

すると

データベース(db)コンテナを作る

のところで先へ進めなくなります。
理由としては　M1 mac では　Docker　が完全に使えるようになっていないためです。
※2021年1月26日時点
公式　Apple M1 技術プレビュー

特に mysql イメージは ARM64 において利用できません。 この状況は mariadb イメージを利用すれば解消されます。

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

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

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

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を表示

データベース接続

backend/.envを編集します。

backend/.env

DB_CONNECTION=mysql
DB_HOST=db
DB_PORT=3306
DB_DATABASE=test
DB_USERNAME=user
DB_PASSWORD=pwd

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

掲示板を作成する

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

Udemy

Youtube

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

作成理由

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

機能紹介

悩み相談掲示板

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

Github

TOP画面

掲示板

詳細ページ

コメント機能

ユーザー一覧

ユーザー詳細画面

お問い合わせ画面

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

苦労したこと

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

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

AWSで構築

Qiita

Udemy

Youtube

続いてはこちらを参考に進めていきます。
私は無料枠の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に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クローン〜デプロイ、マイグレーション）

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

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クローン〜デプロイ、マイグレーション）
またまたこの記事を参考に進めます。

この記事のまま進めていけばパブリックIPでアクセスできるようになります。

http://[設定したElastic IPアドレス]:10080にブラウザからアクセスします。

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

root@0522095ee210:/work# php artisan storage:link
root@0522095ee210:/work# chown -R www-data:root .

これで画像投稿も可能になります。

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

終わりに

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

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

メモ代わり

以下、続きの設定をしていきます。

引き続き

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

独自ドメインでhttps接続

1.[RDS]データベース構築

AWSのRDSでデータベースを構築します。

2.[ELB]作成

ターゲットグループ,ロードバランサーを作成していきます。

3.Route53設定

私は　お名前.com　でドメイン取得しました。
取得したものをRoute53に設定していきます。

4.ACMで証明書発行

証明書を発行したものをELBに設定します。
設定しましたが、httpsで接続でず苦戦中です。

現状以上です。

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

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