Google Codelabs形式のハンズオン資料を作成する 後編

Google Codelabs Landing Page

前回の続きです。この記事では、前回作成した Codelabs にアクセスするためのランディングページを作成する方法を紹介します。

冒頭の画像や Google Codelabs のようなランディングページが作れるようになります。

目次

  1. ランディングページの作り方
  2. ランディングページのソースコードをダウンロードする
  3. Node.js の実行環境を作る
  4. ランディングページを起動する
  5. Dockerfile を編集して開発用のイメージを作る
  6. Codelabs の html ファイルの出力先の変更
  7. 本番環境へのデプロイ
  8. 開発する

ランディングページの作り方

ランディングページ は googlecodelabs/tools/site で公開されているコードを利用することで作成できます。Node.js で書かれています。

ランディングページのソースコードをダウンロードする

前回の記事で作業していたディレクトリに GitHub からソースコードをクローンします。


git clone https://github.com/googlecodelabs/tools.git

クローンしたコードから、必要なファイルを取り出します。


cp -a tools/site/. .

ファイルを取り出したら、クローンしたコードは不要なので削除します。


rm -rf tools

Node.js の実行環境を作る

前回作成した Dockerfile を編集して Node.js と claat コマンドを扱えるようにします。言語のバージョンは適宜変更してください。


FROM golang:1.14-alpine as claat

RUN apk add --no-cache \
    git && \
    go get github.com/googlecodelabs/tools/claat

FROM node:12.16-alpine
COPY --from=claat /go/bin/claat /usr/local/bin/

Docker イメージを作成します。タグ名は適宜変更してください。


docker build . -t karakaram/googlecodelabs

claat コマンドが使えることを確認します。


docker run --rm karakaram/googlecodelabs claat -h

Node.js が使えることを確認します。


docker run --rm karakaram/googlecodelabs node --version

ランディングページを起動する

googlecodelabs/tools/site の手順に従ってランディングページを起動します。

コンテナに入ります。


docker run --rm -v `pwd`:/root/work -w /root/work -p 8000:8000 -it karakaram/googlecodelabs ash

コンテナの中でパッケージをインストールします。


npm install

PATH を通します。


export PATH="./node_modules/.bin/:$PATH"

サーバを起動します。


gulp serve

ポート 8000 で起動しました。


Webserver started at http://localhost:8000

ブラウザから http://localhost:8000 にアクセスすると、表示できません。ソースコードを読んでいくと、外部(コンテナの外)から接続できないようになっていたので、オプションを足して外部からも接続ができるようにします。

tasks/helpers/opts.js


exports.webserver = () => {
  return {
    livereload: false,
+    host: '0.0.0.0',
  };
};

コンテナのサーバを一度止めて、もういちど起動します。


gulp serve

こんどはブラウザからアクセスできました。さきほど作った Codelabs が表示されています。クリックすると、Codelab にアクセスできます。

Google Codelabs Landing Page

Codelabs の中に入り、左上の × リンクをクリックするとランディングページに戻ります。いい感じ。

Google Codelab

Dockerfile を編集して開発用のイメージを作る

手動で行った操作を Dockerfile に反映させておきましょう。


FROM golang:1.14-alpine as claat

RUN apk add --no-cache \
    git && \
    go get github.com/googlecodelabs/tools/claat

FROM node:12.16-alpine
COPY --from=claat /go/bin/claat /usr/local/bin/

WORKDIR /work

COPY . .

RUN npm install && \
    claat export codelabs/*.md

ENV PATH ./node_modules/.bin/:$PATH

EXPOSE 8000

CMD ["gulp", "serve"]

docker-compose.yml を導入します。docker run のときポートやボリュームマウントのオプションを書くのがしんどくなってきたので。

docker-compose.yml


version: '3'

services:
  app:
    build:
      context: .
    volumes:
      - .:/work
    ports:
      - "8000:8000"

コンテナを停止した後、docker-compose 経由で改めてビルド・起動し、ブラウザから動作確認をしておきます。


docker-compose up

Codelabs の html ファイルの出力先の変更

通常、Codelabs の Markdown はバージョン管理をします。claat export コマンドで出力される html ファイルは、バージョン管理には含めたくないので .gitignore の対象となります。

.gitignore しやすいように claat export コマンドのオプションで出力先を変更して実行します。


docker-compose run --rm app claat export -o build_codelabs codelabs/*.md

.gitignore ファイルに末尾に、build_codelabs ディレクトリを追加します


+ /build_codelabs/

Dockerfile の claat export コマンドも修正します。


- claat export codelabs/*.md
+ claat export -o build_codelabs codelabs/*.md

変更前に claat export コマンドで作成されたディレクトリは削除しておきます。


rm -rf codelab-4-codelab-markdown

Codelabs の出力先のディレクトリが変更になったことで、Dockerfile の gulp serve コマンドも変更が必要です。


- CMD ["gulp", "serve"]
+ CMD ["gulp", "serve", "--codelabs-dir=build_codelabs"]

Docker イメージをビルドしなおして動作確認をしておきましょう。


docker-compose build
docker-compose up

docker-compose up する際、ホスト側に node_modules がないとうまく動かないので、docker-compose up でエラーがでてコンテナが起動しないときは以下のコマンドを使って node_modules をホストに転送します。


docker-compose run --rm app npm install

本番環境へのデプロイ

ここまでで、手元の PC の中で開発することができるようになりました。次はこれらを本番環境にデプロイする方法を考えてみましょう。

googlecodelabs/tools/site/README.md Development にあるとおり、ランディングページは html に変換することができます。変換した html ファイルを配信用の Web サーバに転送すれば良いです。

本番環境用の html を生成するためには、以下のコマンドを実行します。Codelabs の出力先を指定するオプションも忘れないようにしましょう。


docker-compose run --rm app gulp dist --codelabs-dir=build_codelabs

実行すると、dist というディレクトリに html 一式が出力されます。ls コマンドで中を覗いてみましょう。


ls -l dist

...
lrwxrwxrwx   1 karasawa-yosuke  staff     17 Apr 30 16:13 codelabs -> ../build_codelabs
...

いろいろファイルが入っていますが、注目すべきところは codelabs ディレクトリ。シンボリックリンクになっていて、一階層上の build_codelabs ディレクトリを指しています。

本番環境にデプロイするときには、このシンボリックリンクを削除して、実態のディレクトリに差し替えてから dist ディレクトリのファイルをアップロードすると良いでしょう。


rm dist/codelabs
cp -r build_codelabs/. dist/codelabs

試したことはないですが、ランディングページを構築するコードには GCP にアップロードする機能も備わっているみたいですね。

開発する

デプロイ方法の目処がついたら、あとは、Codelabs をひたすら書くだけです。Markdown のフォーマットは googlecodelabs/tools/FORMAT-GUIDE.md が参考になります。