#概要
プログラミング未経験、会社員やりながら独学している初心者です。
今回、タイトルの環境でポートフォリオを作るまでを記録していきます。
#参考
-
Udemy
-
Youtube
-
Qiita
-
ドットインストール
開発環境
- 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 がこちら
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を編集します。
DB_CONNECTION=mysql
DB_HOST=db
DB_PORT=3306
DB_DATABASE=test
DB_USERNAME=user
DB_PASSWORD=pwd
こちらをまんま参考にしていれば、この設定でLaravelとデータベースを接続できます。
#掲示板を作成する
続いて掲示板を作っていきます。
参考にしたのはこちら
Udemy
- [HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門
- PHP+MySQL（MariaDB） Webサーバーサイドプログラミング入門
- PHPからLaravelまで サーバーサイドをとことんやってみよう【初心者から脱初心者へ】【わかりやすさ最重視】
Youtube
ひたすら手を動かしながら掲示板を作っていきました。
※Laravel: 6.x で作成しています。
#作成理由
プログラミングを勉強していく中で、たくさんの壁にぶつかり、たくさん検索しました。
※無料で情報がたくさん出ている時代で良かったです。
しかし、完全独学で周りにも相談できる人もいないため、本当に分からない時は優良そうな本や教材を購入したりで勉強しています。
まあ世の中には悩みがたくさんあって、それを投稿できるプラットフォームがあれば良いよね、的な考えと東野圭吾の小説を読んだので作成しました。
（東野圭吾の小説のタイトルを参考に勝手にアプリ名にしています。）
#機能紹介
###悩み相談掲示板
- ユーザー関連
- ユーザー新規登録機能、ログイン、ログアウト機能
- ユーザー情報登録、編集機能
- 投稿関連
- 投稿CRUD
- 画像投稿
- コメント機能、コメント数表示
- 検索機能
- タグ付け機能
- お問い合わせ機能
- 確認画面表示
- お礼画面
- 自動メール送信機能
- デザイン
- Bootstrap
- レスポンシブデザイン
####Github
#####TOP画面
####掲示板
####詳細ページ
####コメント機能
####ユーザー一覧
####ユーザー詳細画面
####お問い合わせ画面
※フォロー機能がまだ実装できていません。。
これから実装していくつもりです。
###苦労したこと
MVCの概念を理解するのに苦労しました。
またリレーションなども理解が難しく多対多の関係もまだあやしいです。タグ機能がつけられたので、フォロー機能とお気に入り機能も実装していく予定です。
次はローカル環境から本番環境にデプロイしていきます。
#AWSで構築
Qiita
- AWSにEC2上でdockerを使用したlaravelをデプロイ①（EC2インスタンス作成）
- EC2インスタンスにgit,docker,docker-composeを導入、公開鍵の登録(CircleCI用)
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 を書き換えます。
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、オートスケールも使用していくつもりです。
ありがとうございました。