なばろぐ

プログラミング系ネタ、作曲活動、雑記など

Docker + Jenkins で GatsbyJs ビルド環境作成

環境構築で躓く人用と自分のためにメモ。

検証、構築環境

  • Windows 10 Pro
    • Insider Preview 19041.207)
  • WSL2
    • Ubuntu-18.04
  • Jenkins
    • 実行当時は 2.222.1
  • node -v
    • v12.16.2
  • npm -v
    • 6.14.4
  • gatsby -v
    • Gatsby CLI version: 2.11.8

docker-compose ファイル

version: '3'
services:
        jenkins:
                image: jenkins/jenkins:lts
                volumes:
                        - ./jenkins_home:/var/jenkins_home
                working_dir: /var/jenkins_home
                ports:
                        - "8080:8080"
                        - "50000:50000"
                tty: true
  • Jenkins イメージは公式の LTS を指定
  • コンテナ内において、 /var/jenkins_home を Jenkins のワーキングディレクトリに指定し、データを永続化させるためにローカルの ./jenkins_home とボリューム共有化
  • ポートは基本 8080 で大丈夫だと思う。50000 番はスレーブ用らしい。

参考

Jenkinsをdocker上に構築 - Qiita

Dockerを使ってJenkinsを起動する方法 - つばろぐ

コンテナ起動

コンテナとの共有用のディレクトリ作成

WSL $ mkdir jenkins_home

コンテナ起動

WSL $ docker-compose up
コンソールに起動時に入力するパスワードが表示されるので、必ずメモ
~
jenkins_1  | *************************************************************
jenkins_1  | *************************************************************
jenkins_1  | *************************************************************
jenkins_1  |
jenkins_1  | Jenkins initial setup is required. An admin user has been created and a password generated.
jenkins_1  | Please use the following password to proceed to installation:
jenkins_1  |
jenkins_1  | XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
jenkins_1  |
jenkins_1  | This may also be found at: /var/jenkins_home/secrets/initialAdminPassword
jenkins_1  |
jenkins_1  | *************************************************************
jenkins_1  | *************************************************************
jenkins_1  | *************************************************************
~

Jenkins のセットアップについては、他を参照。

qiita.com

Node.js インストール

コンテナにルートユーザーで入る。

WSL $ docker-compose exec --user root jenkins /bin/bash

公式のセットアップ方法を利用。

Conaitner # curl -sL https://deb.nodesource.com/setup_12.x | bash -
Container # apt-get install -y nodejs

参照

distributions/README.md at master · nodesource/distributions · GitHub

GatsbyJS インストール

一旦コンテナを抜けて、jenkins ユーザーで入り直す

WSL $ docker-compose exec jenkins /bin/bash

そのままインストールしようとすると、多分 permission denied エラーが起きるので、インストールパスを ~/.npm-global に変更。 global インストールしてるのは許して><

Container $ mkdir ~/.npm-global
Container $ npm config set prefix '~/.npm-global'
Container $ vim ~/.profile
.profile 多分新規作成。下記を追加して保存
export PATH=~/.npm-global/bin:$PATH
Container $ source ~/.profile
Container $ npm install -g gatsby-cli

参照

npmでpermission deniedになった時の対処法[mac] - Qiita

セットアップについてはこれで完了。

GatsbyJS ビルドについて

ビルド時は、毎回 gatsby clean をしたほうが良いかもしれない。(Jenkins に限らずローカルでも再現した)
勉強し初めなので理由はまだ分からないが、公式チュートリアルで一旦動くことまで確認してジョブを実行したところ、1回目は成功するが、2回目から ERROR #98123 WEBPACK エラーが起きてしまった。
キャッシュデータを消さないとうまく行かないらしい?

サンプルジョブシェル

#!/bin/bash

source ~/.profile

cd "GatsbyJS プロジェクトパス"
npm install
gatsby clean
gatsby build

~これ以降はコミットするなりデプロイするなり~
  • 1行目の #!/bin/bash は、source 行を実行するために必要
  • source 行は、先程作成した .profile を指定。そうしないと先程 global でインストールした gatsby コマンドが見当たらない、と言われる

参考

Gatsby build failed: ERROR #98123 WEBPACK Generating JavaScript bundles failed · Issue #22755 · gatsbyjs/gatsby · GitHub