AWS Amplifyを使ってMkDocsをデプロイします

こんにちは、Youtubeの商品紹介動画に流されてテレワークの度に（ゲームは一切やらないんですけどね。。。）ゲーミングヘッドセットが増えていくディーネット山田です。

今回はよいヘッドセット(Astro A40 TRヘッドセット + MIXAMP PRO TR + A40 TR MOD KIT)に出会ったので、しばらくもう購入することはないかな...

さて、そんな雑談はここまでにして、
最近デプロイ系のネタが続いているので、AWS Amplifyを使ったMkDocsのデプロイ方法を紹介したいと思います。

詳しい、AWS Amplifyの使い方は弊社栩野が紹介しているので、こちらをご覧ください。
AWS AMPLIFY と AWS CODECOMMIT で CI/CD 環境の構築

目的

MkDocsのソースコードをバージョン管理しつつ、デプロイされたWEBページを公開したい。

AWS Amplifyとは

弊社栩野と牛山が過去に紹介しているので、こちらをご確認ください。
AWS AMPLIFY と AWS CODECOMMIT で CI/CD 環境の構築
 AWS AMPLIFY を使ってみた (REACTアプリの開発環境作成まで)
AWS AMPLIFYとAMAZON PINPOINTを使ってWEBサイトをデプロイし解析設定をしてみる

MkDocsとは

ドキュメントのソースコードをMarkdownで記載し、プロジェクトドキュメントの作成を目的とした静的サイトジェネレーターです。
https://www.mkdocs.org/

MkDocsのインストール方法

MkDocsをインストールするためのEC2インスタンス環境を作る

ここでは、Amazon Linux2でEC2インスタンスを1台構築します。
MkDocsのソースコードをCodeCommitにアップロードしたいだけなので、t3.nanoで十分です。

EC2インスタンスで行うことは、Python3.8環境を構築する

[ec2-user@ip-172-31-19-34 ~]$ sudo su -

[root@ip-172-31-19-34 ~]# amazon-linux-extras install python3.8 -y

[root@ip-172-31-19-34 ~]# yum install -y python38-devel

[root@ip-172-31-19-34 ~]# pip3.8 install --upgrade pip

[root@ip-172-31-19-34 ~]# pip install setuptools --upgrade

pipを使って、mkdocsをインストールする

[root@ip-172-31-19-34 ~]# python3.8 --version
Python 3.8.5

[root@ip-172-31-19-34 ~]# pip --version
pip 21.0 from /usr/local/lib/python3.8/site-packages/pip (python 3.8)

[root@ip-172-31-19-34 ~]# pip install mkdocs
Collecting mkdocs
  Downloading mkdocs-1.1.2-py3-none-any.whl (6.4 MB)
     |████████████████████████████████| 6.4 MB 9.5 MB/s 
Collecting PyYAML>=3.10
  Downloading PyYAML-5.4.1-cp38-cp38-manylinux1_x86_64.whl (662 kB)
     |████████████████████████████████| 662 kB 68.7 MB/s 
Collecting livereload>=2.5.1
  Downloading livereload-2.6.3.tar.gz (25 kB)
Collecting lunr[languages]==0.5.8
  Downloading lunr-0.5.8-py2.py3-none-any.whl (2.3 MB)
     |████████████████████████████████| 2.3 MB 62.0 MB/s 
Collecting tornado>=5.0
  Downloading tornado-6.1-cp38-cp38-manylinux2010_x86_64.whl (427 kB)
     |████████████████████████████████| 427 kB 56.6 MB/s 
Collecting click>=3.3
  Downloading click-7.1.2-py2.py3-none-any.whl (82 kB)
     |████████████████████████████████| 82 kB 3.1 MB/s 
Collecting Jinja2>=2.10.1
  Downloading Jinja2-2.11.2-py2.py3-none-any.whl (125 kB)
     |████████████████████████████████| 125 kB 74.6 MB/s 
Collecting Markdown>=3.2.1
  Downloading Markdown-3.3.3-py3-none-any.whl (96 kB)
     |████████████████████████████████| 96 kB 13.7 MB/s 
Collecting six>=1.11.0
  Downloading six-1.15.0-py2.py3-none-any.whl (10 kB)
Collecting future>=0.16.0
  Downloading future-0.18.2.tar.gz (829 kB)
     |████████████████████████████████| 829 kB 69.8 MB/s 
Collecting nltk>=3.2.5
  Downloading nltk-3.5.zip (1.4 MB)
     |████████████████████████████████| 1.4 MB 58.8 MB/s 
Collecting MarkupSafe>=0.23
  Downloading MarkupSafe-1.1.1-cp38-cp38-manylinux1_x86_64.whl (32 kB)
Collecting joblib
  Downloading joblib-1.0.0-py3-none-any.whl (302 kB)
     |████████████████████████████████| 302 kB 65.9 MB/s 
Collecting regex
  Downloading regex-2020.11.13-cp38-cp38-manylinux2014_x86_64.whl (738 kB)
     |████████████████████████████████| 738 kB 63.8 MB/s 
Collecting tqdm
  Downloading tqdm-4.56.0-py2.py3-none-any.whl (72 kB)
     |████████████████████████████████| 72 kB 2.7 MB/s 
Using legacy 'setup.py install' for future, since package 'wheel' is not installed.
Using legacy 'setup.py install' for livereload, since package 'wheel' is not installed.
Using legacy 'setup.py install' for nltk, since package 'wheel' is not installed.
Installing collected packages: tqdm, six, regex, joblib, future, click, tornado, nltk, MarkupSafe, lunr, PyYAML, Markdown, livereload, Jinja2, mkdocs
    Running setup.py install for future ... done
    Running setup.py install for nltk ... done
    Running setup.py install for livereload ... done
Successfully installed Jinja2-2.11.2 Markdown-3.3.3 MarkupSafe-1.1.1 PyYAML-5.4.1 click-7.1.2 future-0.18.2 joblib-1.0.0 livereload-2.6.3 lunr-0.5.8 mkdocs-1.1.2 nltk-3.5 regex-2020.11.13 six-1.15.0 tornado-6.1 tqdm-4.56.0

mkdocsコマンドで、プロジェクトを作成する

[root@ip-172-31-19-34 ~]# mkdocs new mkdocs-deploy-test
INFO    -  Creating project directory: mkdocs-deploy-test 
INFO    -  Writing config file: mkdocs-deploy-test/mkdocs.yml 
INFO    -  Writing initial docs: mkdocs-deploy-test/docs/index.md 

[root@ip-172-31-19-34 ~]# ls -l
total 0
drwxr-xr-x 3 root root 36 Jan 24 14:20 mkdocs-deploy-test

git環境からCodeCommitにコミットできるように準備する

gitをインストールして、初期設定を行います

[root@ip-172-31-19-34 ~]# yum install -y git

[root@ip-172-31-19-34 ~]# git --version
git version 2.23.3

[root@ip-172-31-19-34 ~]# git config --global user.name "{自分の名前}"

[root@ip-172-31-19-34 ~]# git config --global user.email "{自分のメールアドレス}"

SSHの秘密鍵を作成する

[root@ip-172-31-19-34 ~]# ssh-keygen 
Generating public/private rsa key pair.
Enter file in which to save the key (/root/.ssh/id_rsa): 
Enter passphrase (empty for no passphrase): 
Enter same passphrase again: 
Your identification has been saved in /root/.ssh/id_rsa.
Your public key has been saved in /root/.ssh/id_rsa.pub.
The key fingerprint is:
SHA256:j49fsjf0smtwwsfksjdkfjisdjioJFIDJOiru9083rj root@ip-172-31-19-34
The key's randomart image is:
+---[RSA 2048]----+
|.=OO.            |
|*BBo+.           |
|+%ooo .          |
|*.+  + o .       |
|*BBAAAA+.        |
|*.o.     .       |
|+=.o             |
|.o=o.            |
| =+ ..           |
+----[SHA256]-----+

コミット用にIAMユーザーを作成する

"AWSCodeCommitPowerUser"のIAMポリシーを持ったユーザーを作成してください。

作成したIAMユーザーにSSHの公開鍵をアップロードする

作成したSSHの公開鍵を確認する

[root@ip-172-31-19-34 ~]# cat .ssh/id_rsa.pub 
ssh-rsa AAAAB3NzaC1yc2BBBBBBBBBBBBBBBBBBB+a4Tqapvlpvp79ToQNuy9asgJwb1oyrcP87Zse7hNEpFJAvUBj2EnFR54BCvHieXYFcC945azcC0hDKTClFNdn1APyG3kg4d1ZEL7bqz1fJSKHcAia0yLt8NtXLrY8gyIeGHIgc9TUlZuNqVqOjvJ5ZnaW2iPJe1wfAEFWslCQ7cuR7CW7IIPm3iRkRcxSkijYCcE+RDobAPguvo/g2JC9/fuoM7My6UiqTYnlhpQJoq/g097ufWEl/oxGa0RaYMQRMuVsZqQqN1qF4XfXX38qZJ3GZT0SMl8DZtnhXYRJA0HoPBy91F1MPhNOe3cBkZmwd3LFN7NCnMDmoh+c3 root@ip-172-31-19-34

作成したIAMユーザーの認証情報にある"SSHパブリックキーのアップロード"をクリックする

貼り付け画面に先ほど確認した公開鍵を貼り付けます

正常にアップロード出来たらユーザー名が表示されるので確認する

CodeCommitへSSH接続するための設定ファイルを作成する

先ほどのSSHパブリックキーアップロードによってユーザー名が割り当てられるので、それをIAMCodeCommitユーザー名のところに入力する。

[root@ip-172-31-19-34 ~]# vi .ssh/config
#-----
Host git-codecommit.*.amazonaws.com
  User {IAMCodeCommitユーザー名}
  IdentityFile ~/.ssh/id_rsa
#-----

[root@ip-172-31-19-34 ~]# chmod 600 .ssh/config

SSHの初回接続を行う

サーバ側のfingerprintを登録するために必要です。

[root@ip-172-31-19-34 ~]# ssh git-codecommit.ap-northeast-1.amazonaws.com
The authenticity of host 'git-codecommit.ap-northeast-1.amazonaws.com (54.240.225.207)' can't be established.
RSA key fingerprint is SHA256:Xk/WeYD/K/bnBybzhiuu4dWpBJtXPf7E30jHU7se4Ow.
RSA key fingerprint is MD5:8e:a3:f0:80:98:48:1c:5c:6f:59:db:a7:8f:6e:c6:cb.
Are you sure you want to continue connecting (yes/no)? yes
Warning: Permanently added 'git-codecommit.ap-northeast-1.amazonaws.com,54.240.225.207' (RSA) to the list of known hosts.
You have successfully authenticated over SSH. You can use Git to interact with AWS CodeCommit. Interactive shells are not supported.Connection to git-codecommit.ap-northeast-1.amazonaws.com closed by remote host.
Connection to git-codecommit.ap-northeast-1.amazonaws.com closed.

途中で、接続を続行してもよいか(Are you sure you want to continue connecting (yes/no)?)尋ねられるので、"yes"を入力してください。

https://docs.aws.amazon.com/ja_jp/codecommit/latest/userguide/setting-up-ssh-unixes.html

CodeCommitにリポジトリを作成して、ソースコードをコミットする

リポジトリを作成する

EC2のMkDocsディレクトリでgitを初期化する

[root@ip-172-31-19-34 ~]# cd mkdocs-deploy-test/

[root@ip-172-31-19-34 mkdocs-deploy-test]# git init
Initialized empty Git repository in /root/mkdocs-deploy-test/.git/

[root@ip-172-31-19-34 mkdocs-deploy-test]# git add .

[root@ip-172-31-19-34 mkdocs-deploy-test]# git commit -m "First Commit"
[master (root-commit) d2f2134] First Commit
 2 files changed, 18 insertions(+)
 create mode 100644 docs/index.md
 create mode 100644 mkdocs.yml

gitにリモートブランチを追加する

[root@ip-172-31-19-34 mkdocs-deploy-test]# git remote add origin ssh://git-codecommit.ap-northeast-1.amazonaws.com/v1/repos/mkdocs-deploy-test

[root@ip-172-31-19-34 mkdocs-deploy-test]# git remote -v
origin  ssh://git-codecommit.ap-northeast-1.amazonaws.com/v1/repos/mkdocs-deploy-test (fetch)
origin  ssh://git-codecommit.ap-northeast-1.amazonaws.com/v1/repos/mkdocs-deploy-test (push)

EC2からMkDocsのソースコードをコミットする

[root@ip-172-31-19-34 mkdocs-deploy-test]# git push origin master
Warning: Permanently added the RSA host key for IP address '52.119.220.10' to the list of known hosts.
Enumerating objects: 5, done.
Counting objects: 100% (5/5), done.
Delta compression using up to 2 threads
Compressing objects: 100% (3/3), done.
Writing objects: 100% (5/5), 601 bytes | 601.00 KiB/s, done.
Total 5 (delta 0), reused 0 (delta 0)
To ssh://git-codecommit.ap-northeast-1.amazonaws.com/v1/repos/mkdocs-deploy-test
 * [new branch]      master -> master

CodeCommitにプッシュされたことを確認する

AWS Amplifyの構成ファイルを作成して、CodeCommitにコミットする

AWS Amplifyの構成ファイルを作成する

[root@ip-172-31-19-34 mkdocs-deploy-test]# vi amplify.yml
#-----
version: 0.1
frontend:
  phases:
    preBuild:
      commands:
        - python3 -m pip install --upgrade pip
        - python3 -m pip install pymdown-extensions
        - python3 -m pip install plantuml-markdown
        - python3 -m pip install mkdocs
        - python3 -m pip install pymdown-extensions
    build:
      commands: 
        - mkdocs build
  artifacts:
    baseDirectory: site
    files:
      - '**/*'
  cache:
    paths: []
#-----

https://docs.aws.amazon.com/ja_jp/amplify/latest/userguide/build-settings.html

構成ファイルを作成したので、gitに追加して、コミットする

[root@ip-172-31-19-34 mkdocs-deploy-test]# git add .

[root@ip-172-31-19-34 mkdocs-deploy-test]# git commit -m "add amplify.yml"
[master 7b0d0b0] add amplify.yml
 1 file changed, 19 insertions(+)
 create mode 100644 amplify.yml

[root@ip-172-31-19-34 mkdocs-deploy-test]# git push origin master
Enumerating objects: 4, done.
Counting objects: 100% (4/4), done.
Delta compression using up to 2 threads
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 498 bytes | 498.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0)
To ssh://git-codecommit.ap-northeast-1.amazonaws.com/v1/repos/mkdocs-deploy-test
   d2f2134..7b0d0b0  master -> master

AWS Amplifyでアプリケーションを作成する

AWS Amplifyのウィザードに従って進める

しばらく待つとデプロイが終了してWEBが見れる様になる

CodeCommitに追加ドキュメントをプッシュしてみる

ドキュメントを作成する

[root@ip-172-31-19-34 mkdocs-deploy-test]# cd docs/

[root@ip-172-31-19-34 docs]# vi test.md
#-----
## これはテスト投稿です

#-----

コミットしてプッシュする

[root@ip-172-31-19-34 docs]# cd ../

[root@ip-172-31-19-34 mkdocs-deploy-test]# git add .

[root@ip-172-31-19-34 mkdocs-deploy-test]# git commit -m "add test.md"
[master 903e50e] add test.md
 1 file changed, 3 insertions(+)
 create mode 100644 docs/test.md

[root@ip-172-31-19-34 mkdocs-deploy-test]# git push origin master
Enumerating objects: 6, done.
Counting objects: 100% (6/6), done.
Delta compression using up to 2 threads
Compressing objects: 100% (3/3), done.
Writing objects: 100% (4/4), 423 bytes | 423.00 KiB/s, done.
Total 4 (delta 0), reused 0 (delta 0)
To ssh://git-codecommit.ap-northeast-1.amazonaws.com/v1/repos/mkdocs-deploy-test
   7b0d0b0..903e50e  master -> master

AWS Amplifyでは自動的にプロビジョンからビルドと開始される

サイトが更新された

備考

AWS AmplifyやMkDocs自体他にも機能盛りだくさんなので、機会があればまた紹介したいと思います。

yamada

プロフィール
テクニカルサポートは卒業して、フロントサイドでお客様環境の構築をさせていただいております。
たまに、テクニカルサポートでご対応させていただくことがあるかもしれませんが、その際はよろしくお願いいたします。
インフラ系のエンジニアですが、時々休日プログラマー（Python、PHP）をやっております。

LINK
クラウドベリージャム：プロフィールページ

目的