はじめに

CRAで作成したReactのアプリの自動ビルド・デプロイ環境をJenkinsで整えたい。

Jenkinsの環境を作る

Jenkins内でDockerコンテナを使わないのでシンプルな構成にする。

docker-compose.yml

version: "3"
services:
  master:
    container_name: master
    image: jenkins/jenkins:latest
    ports:
      - 8080:8080
    volumes:
      - ./jenkins_home:/var/lib/jenkins_home

コンテナ起動後、Jenkinsを立ち上げて初期設定をする。

wattanx

Node.jsのプラグインをインストール

「Manage Jenkins」→「Manage Plugins」

「Manage Jenkins」→「Global Tool Configuration」

Nameは後程使うので、わかりやすい名前にする。今回は「node」。
VersionはLTS版を選択。
その他はデフォルト値。

wattanx

ReactのアプリとJenkinsファイルをGitHubにコミットする

Create-React-Appを使ってプロジェクトを作成する。

npx create-react-app jenkins-react-build --template @chakra-ui/typescript --use-npm

wattanx

Jenkinsfileを作成する

とりあえず、npm install から npm run buildまでをつくる
これもpushしておく

pipeline {
    agent any
    // 上記の「Global Tool Configuration」で設定したnameを指定
    tools { nodejs "node" }
    stages {
        stage('Install') {
            steps {
                dir ("${env.WORKSPACE}/src") {
                  sh 'npm install'
                }
            }
        }
        
        stage('Build') {
            steps {
                dir ("${env.WORKSPACE}/src") {
                  sh 'npm run build'
                }
            }
        }
    }
}

wattanx

Pipelineを作成する

「New Item」→「Pipeline」

下のほうにあるPipelineで
Definition: Pipeline script from SCMを選択

上記で作成したRepositoryを選択し、ブランチも選択する。