同志社大学 モビリティ研究センターの HP (https://mrc.doshisha.ac.jp) です。
もともとは PHP/HTML で動いていた（レイアウト崩れ等が多発していた）ものを、CMS を入れて欲しいという要望（from 佐藤先生）があり、 Next.js(React.js) ・ contentful にマイグレーションしました。
- AWS Lightsail (Static IP を割り当て、大学へ DNS 申請をしています。)
- Node.js
- Apache
- Let's Encrypt
- Next.js (React.js)
- tailwindcss
- contentful
Amazon Linux 2 を利用しています。ディストリビューションに応じてコマンドを読み替えてください。
AWS Lightsail（EC2）上で Apache が動いています。
ロケール対応させるため、 Next.js を SSR して Node.js サーバ上でホスティングしています。サーバレスで公開したいところですが、大学側のドメイン（DNS）が A レコードしか登録申請することができないため、泣く泣くウェブサーバを立てて公開しています。
HTTPS 化については、Let's Encrypt を利用しており、Cron で証明書発行を自動化しています。
https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/ec2-lamp-amazon-linux-2.html
sudo yum update -y
sudo yum install -y httpd
sudo systemctl start httpd # Apache の起動
sudo systemctl enable httpd # インスタンスを再起動しても Apache が起動するようにsudo yum install -y gitcurl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
. ~/.nvm/nvm.sh
nvm install node
npm install -g yarn foreversudo chmod -R 777 /var/www/html/
cd /var/www/html/
git clone https://github.com/Kenny-NISLab/mrc# /var/www/html/mrc/.env.local
NEXT_PUBLIC_CF_SPACE_ID=""
NEXT_PUBLIC_CF_DELIVERY_ACCESS_TOKEN=""Next.js を SSR する際に、 Apache のリバースプロキシでサーバ上の localhost にアクセスされるように設定します。
# /etc/httpd/conf/httpd.conf
- DocumentRoot "/var/www/html"
+ DocumentRoot "/var/www/html/mrc"
- <Directory "/var/www/html">
+ <Directory "/var/www/html/mrc">
+ ProxyRequests Off
+ <Location />
+ ProxyPass http://localhost:3000/
+ ProxyPassReverse http://localhost:3000/
+ </Location>Apache を再起動します。
sudo systemctl restart httpd通常の yarn start コマンドで Node.js サーバを起動した場合、ログアウトと同時にバックグラウンド処理も終了されてしまうため、 forever コマンドで実行する必要があります。必要なコマンドを実行できるシェルスクリプトを実行します。
cd /var/www/html/mrc/
bash scripts/rebuild.shhttps://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/SSL-on-amazon-linux-2.html
調査の結果、 AWS の ACM を利用するのは難しいため、 Let's Encrypt を利用して HTTPS 化を行いました。
基本は AWS のドキュメント通りにやればできます。
sudo yum update -y
sudo yum install -y mod_ssl
cd /etc/pki/tls/certs
sudo ./make-dummy-cert localhost.crt# /etc/httpd/conf.d/ssl.conf
# 下記の行をコメントアウトします
SSLCertificateKeyFile /etc/pki/tls/private/localhost.keysudo systemctl restart httpdsudo wget -r --no-parent -A 'epel-release-*.rpm' https://dl.fedoraproject.org/pub/epel/7/x86_64/Packages/e/
sudo rpm -Uvh dl.fedoraproject.org/pub/epel/7/x86_64/Packages/e/epel-release-*.rpm
sudo yum-config-manager --enable epel*
sudo yum repolist all# /etc/httpd/conf/httpd.conf
# Listen 80 ディレクティブを見つけて、その後ろに下記を追加する
<VirtualHost *:80>
DocumentRoot "/var/www/html/mrc"
ServerName "doshisha.ac.jp"
ServerAlias "mrc.doshisha.ac.jp"
</VirtualHost>sudo systemctl restart httpdsudo yum install -y certbot python2-certbot-apache
sudo certbot
# "Enter email address (used for urgent renewal and security notices)" というプロンプトが表示されたら、連絡先住所を入力し、Enter キーを押します。
# プロンプトが表示されたら Let's Encrypt のサービス利用規約に同意します。
# EFF のメーリングリストに登録するための承認で、「Y」または「N」と入力して Enter キーを押します。
# Certbot に、VirtualHost ブロックで入力した共通名およびサブジェクト代替名 (SAN) が表示されますので、「2」を入力して Enter キーを押します。# /etc/crontab
# 下記のような行を追加する
39 1,13 * * * root certbot renew --no-self-upgradesudo systemctl restart crondGitHub Actions を用いて Lightsail インスタンスにビルドしたファイル群をデプロイしています。
詳しくは、 .github/workflows/deploy.yml を読んでください。
簡単に説明すると、
- Lightsail（EC2）内の
/var/www/html/mrc/に移動 - Shell Script を実行（リビルド）
というものです。
トリガーは、 GitHub の main ブランチに push された時 と、 Contenful で記事が公開・更新・削除 された時です。
HP の更新が完了すると、 Slack に通知が届くようになっています。
NEXT_PUBLIC_CF_SPACE_ID=""
NEXT_PUBLIC_CF_DELIVERY_ACCESS_TOKEN=""
This is a Next.js project bootstrapped with create-next-app.
First, run the development server:
yarn devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!