ステップ・バイ・ステップで Craft CMS を使って質問と答えをやり取りできるサービスを作ってみたいと思います。
こんにちは。この記事は「Craft CMS Advent Calendar 2021」の5日目の記事です。
日頃お客様や制作パートナーの会社さんから見積もりをお願いされたとき、その仕様に対しての疑問点を質問して潰していくことは良くありますよね。
既に案件として受注してからのやり取りであればバックログや Github など、プロジェクトを管理するサービス内でやれば良いのですが、まだ受注することが決まっていないとき、やり取りに困ったことはありませんか?
バックログでとりあえずプロジェクトを作ってやり取りするというのも可能ですが、その場合は回答してもらう方にアカウントを作ってもらったり、スペースに参加してもらったりする必要があります。また、先方がバックログになれていなければ尚更少し抵抗がありますよね。
Dropbox Paper や Google Docs でも可能ですが、これまたアカウントの問題が発生します。
Google Forms であればアカウントが無くても回答してもらえますが、回答の中に画像を含めて説明することができませんよね。Web制作案件だとスクリーンショットを貼り付けつつ説明したいことは多々あります。
メールベースでも良いですが、まあ、、、ちょっと不便ですよね。
そこで、今日から数回にわたって、そういうのを解消できるようなサービスを Craft CMS をベースにして作ってみようと思います(昨日思い立ちました)。
今のところ考えている仕様は下記の通りです。
とりあえず、こんな感じでいいですかね。あとあと @mersy の要望を取り入れていきましょう。
では早速 Craft CMS をインストールします。今回も僕のお気に入りのレンタルサーバー「カラフルボックス」を使っていきます。
詳しいインストール方法は「カラフルボックスで始める - はじめての Craft CMS (3) 「Craft CMS のインストール」」にも書いてあるので、今回の記事で分からないところがあればそちらも参考にしてください。
カラフルボックスの cPanel であらかじめ下記の作業を終わらせておきましょう。
まず、cPanel の中のターミナルを開き、composer -V
コマンドで composer がインストールされていることを確認しましょう。もし、インストールされていない場合は「カラフルボックスに Composer 2.0 をインストールする方法」を参考にインストールしましょう。
続いて Craft CMS をインストールします。Craft CMS の本体はドキュメントルート外に作るべきなので、今回は、ホームディレクトリに craftcms というディレクトリを作り、その中のサブフォルダとしてインストールします。YOUR_CRAFT_PROJECT_NAME
部分はお好きなように変更してください。
cd
mkdir craftcms
cd craftcms/
composer create-project craftcms/craft YOUR_CRAFT_PROJECT_NAME
Craft CMS のインストールが完了すると「Are you ready to begin the setup?
」と聞かれます。すでにデータベースを作ってあるので、 yes
をタイプしましょう。下記の項目を聞かれますので、先ほど作ったデータベースの情報を入れて進んでいきます。
Which database driver are you using? [mysql,pgsql,?]: mysql
Database server name or IP address: [127.0.0.1]
Database port: [3306]
Database username: [root]
Database password:
Database name:
Database table prefix:
データベースの接続に成功すると「Install Craft now?
」と聞かれますので、yes
をタイプして管理者アカウントを作成し、サイトの情報を入力します。今回、サイト名はお互いが共通認識にあるという意味の英語の「On The Same Page」としてみました。Site language
のところを ja-JP とすれば管理画面が日本語になります。
Username: [admin]
Email:
Password:
Confirm:
Site name: On The Same Page
Site URL: @web/
Site language: [en-US] en-NZ
...
Generating project config files from the loaded project config ... done
ここまでの流れで、Craft CMS がドキュメントルート外に設置されたので、公開フォルダ( web
ディレクトリ)をドキュメントルート下に移動します。
分かりやすいようにドキュメントルート下に Craft CMS のプロジェクトディレクトリと同じ名前のディレクトリを作り、その中へ移動します。
cd
cd public_html/
mkdir YOUR_CRAFT_PROJECT_NAME
cd YOUR_CRAFT_PROJECT_NAME/
mv ~/craftcms/YOUR_CRAFT_PROJECT_NAME/web/ .
web
ディレクトリの中の index.php
を開きます。
cd ~/public_html/YOUR_CRAFT_PROJECT_NAME/web
vi index.php
そして下記の部分を変更します。
// 変更前
define('CRAFT_BASE_PATH', dirname(__DIR__));
// 変更後
define('CRAFT_BASE_PATH', dirname(__DIR__, 3) . '/craftcms/YOUR_CRAFT_PROJECT_NAME');
今記事をお読みになっている環境によっては変更後が2行に改行されているかもしれませんが、1行で書いてください。
この dirname(__DIR__, 3) . '/craftcms/YOUR_CRAFT_PROJECT_NAME'
の部分が Craft CMS をインストールしたディレクトリと一致しなければなりませんが、ちょっとややこしいですよね。なので念のため index.php
のあるディレクトリ(今そこにいるハズです)で下記のように PHP を CLI で実行して出力される値がちゃんと Craft CMS をインストールしたディレクトリと一致するか確認すると良いでしょう。
php -r "echo dirname(__DIR__, 3) . '/craftcms/YOUR_CRAFT_PROJECT_NAME';"
また、現在 Craft CMS の公開ディレクトリにいるはずで、そのフルパスを後のセキュリティ対策で利用するので、pwd コマンドで出力されるフルパスをメモしておきましょう。
pwd
/home/YOUR_USER_NAME/public_html/YOUR_CRAFT_PROJECT_NAME/web
# ↑このパスをコピーしておく
これでインストールは完了しましたので、cPanel で public_html/YOUR_CRAFT_PROJECT_NAME/web
にドメインを割り当てましょう。
開発中は有料の Pro プランをお試しで使えるように foo-text.example.com
となるようにしておくと良いです。
ドメインを割り当てたら foo-text.example.com
にアクセスしてウェブカムページが表示されることを確認しましょう。
「Craft CMS を安全に利用するために | BUN:Log」にもあるようにセキュリティ対策は大切ですので、設定していきましょう。
まずは、Craft CMS のプロジェクトディレクトリに移動します。
cd ~/craftcms/YOUR_PROJECT_NAME/
そして vi .env
で .env
ファイルに SITE_URL
と SITE_PATH
という環境変数を追加し、CP_TRIGGER
の値を変更します。
なお、コマンドラインでの操作に抵抗がある人は、cPanel のファイルマネージャーを使って変更すると良いです。
# 変更
CP_TRIGGER=YOUR_ADMIN_TRIGGER_STRING
# 追記
SITE_URL="https://foo-text.example.com"
SITE_PATH="/home/YOUR_USER_NAME/public_html/YOUR_CRAFT_PROJECT_NAME/web"
この .env ファイルは重要な情報が載っているので読み取り専用にしておきましょう。
chmod 400 .env
続いて、 vi config/general.php
で全般設定のファイルを開き、return
の中に下記を追記します。
'aliases' => [
'@web' => App::env('SITE_URL'),
'@webroot' => App::env('SITE_PATH'),
],
先ほどの BUN さんの記事にあるとおり 'allowAdminChanges' => false,
も追記したいところですが、開発中は便利なので、開発がだいぶ進んでから追加しても良いでしょう。
これでだいたい設定作業も完了です。ブラウザで onthesamepage-test.tinybeans.dev/YOUR_ADMIN_TRIGGER_STRING
にアクセスして、管理画面にログインできることを確認しましょう。
お疲れ様でした。今日はここまです。See you tomorrow!