Gridsomeを使ってみる【ビルド&デプロイ編】

前回の記事で開発環境を整えました。

開発する前に、先にビルドとデプロイ環境を整えたいと思います。
早速見ていきます。

Travisの設定

Travis CIにアクセスしGitHubアカウントでログインしましょう。 Travisと連携させたいリポジトリのスイッチをONにします。 これで設定は完了です。

Travisコマンドをインストールする

TravisはHomebrewにもあるので、今回はHomebrewを使ってインストールします。

versionオプションでバージョンの番号が出ているとインストールができていることが確認できます。

$ travis --version
1.8.9

.travis.ymlを作成する

.travis.ymlはTravisにどのような処理をさせるか命令を記述するファイルです。
以下のように記述しておきます。

.travis.yml

language: node_js
node_js:
  - 10

dist: trusty
sudo: false
cache: yarn

branches:
  only:
    - release

before_deploy:
  - yarn global add netlify-cli
  - yarn build

deploy:
  provider: script
  script: netlify deploy -s $NETLIFY_SITE_ID --auth $NETLIFY_PUBLISH_KEY -p --dir ./dist
  on:
    branch: release

このファイルの要点だけ説明します。

yarnを使用する

dist: trusty
sudo: false
cache: yarn

詳細はこちらを参照してください。
Travis CIでYarn(pkg)を使う設定 (node.js) - Qiita

実行ブランチを設定する

branches:
  only:
    - release

releaseブランチにプッシュした場合にTravisが動くようにしています。

deployするときの処理を書く

deploy:
  provider: script
  script: netlify deploy -s $NETLIFY_SITE_ID --auth $NETLIFY_PUBLISH_KEY -p --dir ./dist
  on:
    branch: release

providerにscriptと書くことで、自分のscriptでデプロイさせます。
詳しくはこちらを参照してください。
Script deployment - Travis CI
onはデプロイ処理をする対象を指定します。
この場合だとreleaseブランチです。
script内の$NETLIFY_SITE_ID、$NETLIFY_PUBLISH_KEYはTravisの環境変数です。

envファイルを暗号化する

実行環境によって値が変わるものをenvファイルに入れて開発していますが、ファイルが無いとデプロイできません。
しかしgit管理対象にしているので、Travisを実行する場合はビルドができません。
そのため、ファイルを暗号化して、それをTravis上で解凍します。

script/encrypt.sh

tar cvf env.tar \
.env \
.env.production
travis encrypt-file env.tar

env.tarに.envと.env.productionを入れ、travis encrypt-fileでenv.tarを暗号化します。
travis encrypt-fileコマンドでいろいろ聞かれますが全部yesでいいです。
すると以下の表示がされ、env.tar.encが作成されます。

Please add the following to your build script (before_install stage in your .travis.yml, for instance):

    openssl aes-256-cbc -K $encrypted_09f96960bb2d_key -iv $encrypted_09f96960bb2d_iv -in env.tar.enc -out env.tar -d

Pro Tip: You can add it automatically by running with --add.

Make sure to add env.tar.enc to the git repository.
Make sure not to add env.tar to the git repository.
Commit all changes to your .travis.yml.

この表示通りに.travis.ymlに以下を追加します。

language: node_js
node_js:
  - 10

dist: trusty
sudo: false
cache: yarn

branches:
  only:
    - release

# 以下を追加
before_install:
  - openssl aes-256-cbc -K $encrypted_09f96960bb2d_key -iv $encrypted_09f96960bb2d_iv -in env.tar.enc -out env.tar -d
  - tar xvf env.tar

before_deploy:
  - yarn global add netlify-cli
  - yarn build

deploy:
  provider: script
  script: netlify deploy -s $NETLIFY_SITE_ID --auth $NETLIFY_PUBLISH_KEY -p --dir ./dist
  on:
    branch: release

env.tar.encはgit管理しておきましょう。
before_installのtar xvf env.tarは、Travis上でenv.tarを解凍する処理です。これがないと.envと.env.productionがenv.tarに入ったままになるので注意しましょう。
ちなみに秘密鍵はTravisの環境変数にちゃんと入っています。

Netlifyで設定をする

Netlifyにログインしましょう。GitHubアカウントでログイン可能です。

New site from Gitから、リポジトリを選択しましょう。
いろいろ選択可能ですが、今回はTravisからデプロイするので設定不要です。
Deploy siteからサイトを作成します。

Site settingsからAPI IDという項目があるので値をコピーします。

Travisの環境変数に、項目名は何でもいいですが、分かりやすいようにNETLIFY_SITE_IDという項目を作ってさきほどの値をペーストします。

アカウント設定画面からOAuth applicationsを選び、Personal access tokensからNew access tokenでtokenを発行します。
項目名Travis publish keyとしておきます。
その後表示されるtokenは今後表示できないので、誰にも見られない場所に保管しておきましょう。
Travisの環境変数に、やはり項目名は何でもいいですが、NETLIFY_PUBLISH_KEYという項目名でさきほどの値をペーストします。

対象ブランチでビルドしてnetlifyにデプロイする

releaseブランチを作成し、プッシュするとTravisが起動します。
encフォルダ解凍されビルドを実行し、distフォルダが作成されます。
その後
netlify deploy -s $NETLIFY_SITE_ID --auth $NETLIFY_PUBLISH_KEY -p --dir ./dist
でdistフォルダがNetlifyに送られデプロイされます。

以上でデプロイ完了です。

最後に

netlify cliのバージョンが上がり、コマンドの使い方が変わった場合は修正が必要になります。注意してください。