こんにちは。この記事では、GitLabとDocker上のJenkinsを使って、git pushのたびにロリポップのWebサーバへ自動デプロイする仕組みを構築したので、その手順をまとめます。
ローカルJenkinsにWebhookを通すために ngrok を活用している点がポイントです。
なお始めた背景には、CI/CDに興味があったということがあります。
実際自分がアサインされた案件において、projectのbuildやreleaseに組み込まれていました。裏側の仕組みが気になっていたため構築してみることにしたという経緯です！
全体構成
[local PC(Windows)]
│
│ git push
▼
┌────────────┐
│ GitLab │
└────────────┘
│
│ Webhook発火(Jenkinsへ通知)
▼
┌───────────────────┐
│ ngrok(トンネル作成)│
└───────────────────┘
│
│ （一時的な公開URLを発行）
▼
┌─────────────────────────────────┐
│ Jenkins (Docker localhost:8080) │
└─────────────────────────────────┘
│
│ build＆deploy
▼
┌────────────────────┐
│ lolipop(Webserver) │
│ (FTP) │
└────────────────────┘
🛠️ 環境概要
| 項目 | 内容 |
|---|---|
| ローカル環境 | Windows |
| Gitホスティング | GitLab（gitlab.com） |
| CI/CDツール | Jenkins（Dockerコンテナで起動） |
| 外部公開 | ngrokでJenkinsのポートを一時的に外部公開 |
| Webサーバ | ロリポップ（FTPアップロード） |
🐳 JenkinsをDockerで起動
docker run -d \
--name jenkins \
-p 8080:8080 -p 50000:50000 \
-v jenkins_home:/var/jenkins_home \
jenkins/jenkins:lts
ngrokで外部公開
GitLabのWebhookがローカルJenkinsに届くように、ngrokで外部トンネルを張ります：
ngrok http 8080
- 表示されたURL（例：
https://abcd1234.ngrok.io）をGitLabのWebhookに設定します。 - 無料プランではこのURLは毎回変わります（固定URLは有料プラン限定）。
GitLab Webhook設定
GitLab > [Your Repo] > Settings > Webhooks：
- URL：
https://xxxx.ngrok.io/job/<ジョブ名>/build?token=YOUR_TOKEN - Trigger： Push events ✅
Jenkins側は「リモートビルドの許可」をONにし、トークンを設定しました。
Jenkinsジョブ内容（FTPアップロード）
#!/bin/bash
echo "Deploy start"
lftp -u ユーザー名,パスワード ftp://ftp.lolipop.jp <<EOF
cd public_html
mirror -R ./dist ./
bye
EOF
動作確認手順
-
ngrok http 8080でJenkinsを外部公開 -
git pushでGitLabに変更を送信 - GitLabのWebhookがngrok経由でJenkinsに通知
- Jenkinsがジョブを実行し、webserver(今回はlolipop)にアップロード
- Webサイトに反映されていれば成功！
🧩 注意点・補足
- ngrok無料プランではURLが起動ごとに変わってしまいます。
→ そのため、Webhookの更新が毎回必要。
🔚 まとめ
- GitLab + Jenkins（Docker） + ngrok + ロリポップ の構成で、簡易CI/CDの構築を経験できました。
→会社のCI/CDのフローがあまり理解できていなかったので、実際に手を動かして経験することで、Jenkinsの役割について改めて理解できました。 - 無料版だとngrokのURLが変わってしまうことは盲点でした。現状だと少し使いにくいので改良していきたいなと思いつつ、実際やってみたかったCI/CDまわりの理解はできたので一旦はよしとします。