環境構築からデプロイまで一通りやってみる。
さて、ぼちぼち環境構築する準備が整ってきたかなぁということで、
自分の作りたい環境をチュートリアル的に構築してみようかな。
前提
・GitHub、herokuのアカウント作成や初期設定は終わっているものとして進めます。
・docker、docker-composeのインストールも終わっているものとして進めます。
・プロジェクト名は仮に「project-x」としておきます。
・Dockerは予め起動しておきます。
プロジェクト・リポジトリの準備など
①プロジェクトのディレクトリを作成して、そのディレクトリに移動
|
1 |
mkdir project-x && cd $_ |
これ、「mkdir」と「cd」で毎回同じディレクトリ名を2回入れて面倒くさっって思ってたけど、
ちゃんと方法があったんですねぇ…。
②GitHubにてリモートリポジトリを作成
リポジトリ名にはプロジェクト名を付けます。
③「.gitignore」ファイルを作成
|
1 |
echo "/logs" > .gitignore |
これで「logs」ディレクトリ以下はコミットされなくなります。
文字通り、無視ですね。
ところで、Readmeは作成しておくのがマナーなのかな？
個人的には英語でもReadmeに使い方が書いてあって助かった記憶がままあるので、
あった方が親切なんだろうなーとは思います。
今回は練習なのでスキップ、もしくは以下のようにプロジェクト名だけ入れておきます。
|
1 |
echo "# project-x" > README.md |
④ローカルリポジトリ作成 ＆ 初回コミット
カレントディレクトリにてリポジトリを新規作成して、コミットします。
|
1 2 3 |
git init git add . git commit -m "first commit" |
⑤リモートリポジトリに名前を紐付け
リモートリポジトリのURLを「origin」という名前に紐付けます。
URLに名前をつけることで呼び出しやすくしています。
|
1 |
git remote add origin git@github.com:kozitex/project-x.git |
これで「git push」する時に「origin」と書けば、
リモートリポジトリが指定できるようになると。
DNSとかエイリアスみたいなもんですね。
いや、分かりやすいかは人に依るなw
ちなみに、リモートリポジトリのデフォルト名が「origin」なので、
慣習的に「origin」が使われることが多いけど、好きな名前をつけてOKみたい。
⑥リモートリポジトリにPush
GitHubにあるリモートリポジトリにPushします。
|
1 |
git push -u origin master |
「-u」オプションをつけてPushが成功すると、これ以降はpushもpullも
リポジトリ名とブランチ名を省略できるので、ちょっぴり便利かと思います。
これは、Push先であるリモートのmasterブランチがローカルのmasterブランチの
上流ブランチに設定されるためらしいんですが…
上流ブランチって何？って思って調べてみたんですけど、
イマイチ定義がよく分かんなくて、明確に説明できないんですよねぇ…
ここは追々勉強します。
ファイル・ディレクトリの準備
最終的にはこんなフォルダ構成になる予定
|
1 2 3 4 5 6 7 8 9 10 11 |
project-x ┝docker ┃┝nginx ┃┃┗default.conf ┃┗php ┃ ┗php.ini ┝logs → 各種ログの保存場所（自動的に作成される） ┝src → Laravelのインストールディレクトリ ┝docker-compose.yml ┝Dockerfile ┗README.md |
①必要なディレクトリを作成
|
1 2 |
mkdir -p docker/php mkdir docker/nginx |
②必要なファイルを作成
一気に空ファイルだけ作成します。
|
1 2 3 4 5 |
touch .env touch docker-compose.yml touch Dockerfile touch docker/php/php.ini touch docker/nginx/default.conf |
docker設定ファイルの準備
さっき作った空ファイルに内容をペーストしていきます。
（※Finder上で「.env」などの隠しファイルが見つけられない場合は、
ディレクトリを開いて、[shift]+[command]+[.]キーで現れると思います。）
①「.env」
「docker-compose.yml」から参照する環境変数をまとめたファイルです。
|
1 2 3 4 5 6 7 8 |
COMPOSE_PROJECT_NAME=project-x PROJECT_PATH=./src TZ=Asia/Tokyo WEB_PORT=10080 APP_PORT=18000 DB_NAME=default DB_USER=default DB_PASS=secret |
環境を切り替えやすくするために別ファイルに切り出すものなんですが、
どんな場面で使われるんだろうか…？
②「docker-compose.yml」
7行目の「context:」は、「Dockerfile」をプロジェクト直下に置きたくて設定。
17〜24行目や39〜49行目は、DBにPostgreSQLを使うためにに少しいじっています。
イメージOSをAlpineに統一したり、やたら最新バージョンに設定したりしてます。
公式イメージの最新バージョンはDocker Hub（https://hub.docker.com/）で確認できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
version: "3" services: app: build: context: ./ args: - TZ=${TZ:-Asia/Tokyo} ports: - ${APP_PORT:-18000}:8000 volumes: - ${PROJECT_PATH:-./src}:/work - ./logs:/var/log/php - ./docker/php/php.ini:/usr/local/etc/php/php.ini working_dir: /work environment: - DB_CONNECTION=pgsql - DB_HOST=db - DB_PORT=5432 - DB_DATABASE=${DB_NAME} - DB_USERNAME=${DB_USER} - DB_PASSWORD=${DB_PASS} - TZ=${TZ} web: image: nginx:1.17.10-alpine depends_on: - app ports: - ${WEB_PORT:-10080}:80 volumes: - ${PROJECT_PATH:-./src}:/work - ./logs:/var/log/nginx - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf environment: - TZ=${TZ:-Asia/Tokyo} db: image: postgres:12.2-alpine ports: - 5432:5432 volumes: - db-store:/var/lib/pgsql - ./logs:/var/log/pgsql environment: - POSTGRES_DB=${DB_NAME} - POSTGRES_USER=${DB_USER} - POSTGRES_PASSWORD=${DB_PASS} node: image: node:14.0.0-alpine3.10 tty: true volumes: - ${PROJECT_PATH:-./src}:/work working_dir: /work volumes: db-store: |
${ 〜 }と書かれている箇所は、「.env」ファイルの変数を参照してるもの。
${ 〜 :- 〜 }となっているのは、「:-」の右側がデフォルト値です。
データの永続化は分かったようで分かってなかった！
もうちょっと勉強が必要です。
③「Dockerfile」
独自パラメータは、1行目にあるイメージのバージョンと、11行目のPostgresの
開発用パッケージのインストール、それから12行目のPHPの拡張機能のインストールに
「pgsql pdo_pgsql」を追加しています。これ2つとも必要だったんだっけか…？
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
FROM php:7.4.5-fpm-alpine3.11 ARG TZ ENV COMPOSER_ALLOW_SUPERUSER 1 ENV COMPOSER_HOME /composer RUN set -eux && \ apk add --update-cache --no-cache --virtual=.build-dependencies tzdata && \ cp /usr/share/zoneinfo/${TZ} /etc/localtime && \ apk del .build-dependencies && \ apk add --update-cache --no-cache postgresql-dev && \ docker-php-ext-install bcmath pgsql pdo_pgsql && \ curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/bin --filename=composer && \ composer config -g repos.packagist composer https://packagist.jp && \ composer global require hirak/prestissimo |
各コンテナ用の設定ファイルの準備（PHP・nginx）
①「php.ini」
ここもイマイチよく分かってなくて、恥ずかしながらこちらから丸パクさせていただきました。
https://qiita.com/ucan-lab/items/0d74378e1b9ba81699a9
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
zend.exception_ignore_args = off expose_php = on max_execution_time = 30 max_input_vars = 1000 upload_max_filesize = 64M post_max_size = 128M memory_limit = 256M error_reporting = E_ALL display_errors = on display_startup_errors = on log_errors = on error_log = /var/log/php/php-error.log default_charset = UTF-8 [Date] date.timezone = ${TZ} [Assertion] zend.assertions = 1 [mbstring] mbstring.language = Japanese |
②「default.conf」（nginxの設定ファイル）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
server { listen 80; root /work/public; index index.php; charset utf-8; location / { root /work/public; try_files $uri $uri/ /index.php$is_args$args; } location ~ \.php$ { fastcgi_split_path_info ^(.+\.php)(/.+)$; fastcgi_pass app:9000; fastcgi_index index.php; include fastcgi_params; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; fastcgi_param PATH_INFO $fastcgi_path_info; } } |
コンテナの起動 ＆ Laravelインストール
①イメージの構築＆コンテナの構築・起動
|
1 |
docker-compose up -d |
-dオプションはログ出力なしで、バックグラウンドで実行します。
オプションなしで実行してみると違いが分かるはず。
ちなみに、本来は「docker-compose build」でイメージ構築してから、
「docker-compose up」でコンテナの構築・起動という流れになります。
ただし、初回のようにイメージが未構築の状態で「docker-compose up」を
実行すると、イメージ構築も実行してくれるようです。
この2つは「docker-compose up -d –build」で1行にまとめることもできます。
他にもイメージ・コンテナ構築時のキャッシュオプションや、コンテナの起動・終了
を行うstart、stopコマンド、コンテナの終了・削除まで行うdownコマンドなど、
憶えることはまだありそうです…
②コンテナの起動を確認
|
1 |
docker-compose ps |
Docker DesktopのDashboardからでも確認できます。
③Laravelをインストール＆プリセットをReactに切り替え（デフォルトはVue）
appコンテナに入ってコマンドを実行します。
2行目のLaravelインストールは少し時間がかかるかも。
4行目の「–auth」はログイン認証機能を簡単に実装できるオプションデス。
後でテストしてみたいのでここでは付けておきます。
|
1 2 3 4 5 |
docker-compose exec app ash [/work #] composer create-project --prefer-dist laravel/laravel ./ [/work #] composer require laravel/ui [/work #] php artisan ui react --auth [/work #] exit |
④npmのインストール
nodeコンテナに入ってコマンド実行。
|
1 2 3 4 |
docker-compose exec node ash [/work #] npm install [/work #] npm run dev [/work #] exit |
⑤マイグレーション実行
appコンテナに入ってコマンド実行。
|
1 2 3 |
docker-compose exec app ash [/work #] php artisan migrate [/work #] exit |
⑥動作確認
ローカルでの環境構築が完了したはずなので、
127.0.0.1:10080 にアクセスしてLaravelのWelcomeページが表示されることを確認します。
⑦コミット＆GitHubへプッシュ
ここらでGitHubのリモートリポジトリにPushしておきます。
|
1 2 3 |
git add . git commit -m “build environment” git push |
herokuにデプロイ
①herokuにログイン
|
1 |
heroku login |
heroku: Press any key to open up the browser to login or q to exit:
というメッセージが出たら、「q」以外の適当なキーを押します。
ブラウザでログイン画面が開くので「Log in」をクリックしてターミナルへ戻ります。
②プロジェクトを作成
heroku上にPHPの新規プロジェクトを作成します。
|
1 |
heroku create kozitex-project-x --buildpack heroku/php |
「project-x」というプロジェクト名は被ったので、適当に文字列を追加します。
③アプリケーションキーの発行と追加
|
1 |
docker-compose exec app php artisan --no-ansi key:generate --show |
表示されたキーをコピーして、次のコマンドにペースト
|
1 |
heroku config:set APP_KEY=base64:xxx... |
④アドオンのインストール
herokuでPostgresを利用するためのアドオンをインストールします。
|
1 |
heroku addons:add heroku-postgresql |
⑤データベース接続情報をセット
2行目の「db」はデータベースコンテナのコンテナ名です。
|
1 2 3 4 5 6 |
heroku config:set DB_CONNECTION=pgsql heroku config:set DB_HOST=db heroku config:set DB_PORT=5432 heroku config:set DB_DATABASE=default heroku config:set DB_USERNAME=default heroku config:set DB_PASSWORD=secret |
⑥Webサーバー設定
heroku上でWebサーバーを動かすための設定を入れておきます。
|
1 2 3 |
cd src echo web: vendor/bin/heroku-php-nginx -C nginx_app.conf public/ > Procfile echo 'location / { index index.html index.php; try_files $uri $uri/ /index.php?$query_string; }' > nginx_app.conf |
⑦デプロイ実行
プロジェクトディレクトリ直下に戻って、herokuのリモートリポジトリへPushします。
Pushするのは「src」ディレクトリのみです。
|
1 2 3 4 |
cd .. git add . git commit -m 'deploy to Heroku' git subtree push --prefix src/ heroku master |
⑧herokuにmigrateをインストールして、heroku上でmigrateを実行
|
1 2 |
heroku run "php artisan migrate:install" heroku run "php artisan migrate" |
Do you really wish to run this command? (yes/no) [no]:
と聞かれるので「yes」と入力してreturnを押します。
⑨動作確認
|
1 |
heroku open |
ブラウザでWelcomeページが開きます。
右上の「 REGISTER」からユーザー登録ができます。
ログイン、ログアウトが正常にできるかを試してみます。
Reactの動作確認
さて、もう一息。
最後はheroku上でReactがちゃんと動作してるか簡単に確認してみます。
いまログインすると、画面上に「You are logged in!」と出てきますが、
その下に指定した文字を表示させてみます。
①「home.blade.php」の編集
ログイン後に表示されるページ「home.blade.php」を編集します。
場所は「project-x/src/resources/views/」の中です。
18行目を追記します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
@extends('layouts.app') @section('content') <div class="container"> <div class="row justify-content-center"> <div class="col-md-8"> <div class="card"> <div class="card-header">Dashboard</div> <div class="card-body"> @if (session('status')) <div class="alert alert-success" role="alert"> {{ session('status') }} </div> @endif You are logged in! <div id="test"></div> </div> </div> </div> </div> </div> @endsection |
②「app.js」の編集
「project-x/src/resources/js/app.js」に16行目を追記します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/** * First we will load all of this project's JavaScript dependencies which * includes React and other helpers. It's a great starting point while * building robust, powerful web applications using React + Laravel. */ require('./bootstrap'); /** * Next, we will create a fresh React component instance and attach it to * the page. Then, you may begin adding components to this application * or customize the JavaScript scaffolding to fit your unique needs. */ require('./components/Example'); require('./components/Test'); |
③「Test.js」の作成
「project-x/src/resources/js/components/」に「Test.js」を以下の内容で作成します。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import React, { Component } from 'react'; import ReactDOM from 'react-dom'; export default class Test extends Component { render() { return ( <div>RenderingのTestです。</div> ); } } ReactDOM.render(<Test />, document.getElementById('test')); |
④コンパイルを実行
nodeコンテナでコマンドを実行します。
|
1 |
docker-compose exec node npm run dev |
⑤動作確認
まずは、localhostで 127.0.0.1:10080 表示を確認します。
ユーザーを登録してログインしてみてください。
⑥「package.json」を編集
「project-x/src/package.json」に11行目を追記します。
（※10行目の末尾に「,」カンマも忘れずに）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
{ "private": true, "scripts": { "dev": "npm run development", "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch": "npm run development -- --watch", "watch-poll": "npm run watch -- --watch-poll", "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", "prod": "npm run production", "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "start": "npm run dev" }, "devDependencies": { "@babel/preset-react": "^7.0.0", "axios": "^0.19", "bootstrap": "^4.0.0", "cross-env": "^7.0", "jquery": "^3.2", "laravel-mix": "^5.0.1", "lodash": "^4.17.13", "popper.js": "^1.12", "react": "^16.2.0", "react-dom": "^16.2.0", "resolve-url-loader": "^3.1.0", "sass": "^1.15.2", "sass-loader": "^8.0.0" } <br> |
これでherokuにデプロイした際にアセットのコンパイルが行われる！
…ようになったみたいなんですが、「なぜ？」がまだよく分かってないので、
その辺りは追い追い。
⑦コミット＆GitHubにプッシュ
|
1 2 3 |
git add . git commit -m “confirm compiling” git push |
⑧herokuにデプロイ
|
1 |
git subtree push --prefix src/ heroku master |
⑨動作確認
|
1 |
heroku open |
ブラウザで開きます。
こちらもユーザーを登録してログインしてみてください。
ふぅ＝、ちょっと長くなっちゃいましたが、
とりあえず完了ですね。
まだまだ理解が浅いところがありますが、
だいぶ勉強になりました。
次はようやく、市場調査かな…やるかな…どうかな…。