Engineering｜実装

読了までの時間：約16分

新卒2年目デザイナーが挑戦！はじめてのCI/CDパイプライン構築

新卒2年目デザイナーが実際にCI/CDパイプラインを設定した経験をもとに、そのメリットや設定方法を解説します。

2025年02月02日 2025年02月15日

Git 自動化

今回の作業の流れ

CI/CD設定とは何かと正確に述べられるほどの知識がないため、今回の記事はあくまで作業の備忘録です。

FTPを使って更新作業を行なっている人は、本記事の設定を行うとかなり工数を短縮できます！
今回は下記の流れでCI/CIパイプラインの設定行いました。

STEP1

SSHキーの作成・設定

ローカル、またはXserverでSSHキーを作成します。

STEP2

SSH接続の設定

XserverへSSH接続ができるか確認します。

STEP3

.gitlab-ci.ymlファイルの作成

作成したファイルに実行したい内容を記述します。

STEP4

CI/CDパイプラインテスト

特定のブランチにマージすると本番サーバーが更新されることを確認します。

作業環境

	作業環境
PC	MacBook Air M1 2020
OS	Sequoia 15.0.1
コードエディター	Visual Studio Code
Git	GitLab
サーバー	Xserver

「Xserver Static」では本記事の設定ができないので、ご注意ください。

事前に用意するもの

本記事の作業を進めるには下記が終わっている必要があります。

ドメインの取得
リポジトリの作成

SSHキーの作成

ターミナルとXsever、どちらでSSHキーを生成しても問題ありません。今回は両方の方法を紹介します。
また、SSHキーを生成すると公開鍵と秘密鍵という2つが生成されます。拡張子がないものが秘密鍵、.pubの拡張子が公開鍵です。

ターミナルを使ったSSHキーの作成

ターミナルを起動して下記のコマンドを入力します。your-mail@example.comの部分にはあなたのメールアドレスを追加しますが、任意です。ここのメールアドレスは鍵のコメントと呼ばれ、生成したSSHキーに関連付けられるテキストのことを指します。
このコメントは主に識別用で、鍵の用途や所有者を示すために使用されるのため、XserverやGitLabでログインに用いているメールアドレスを入力することをオススメします。

Shell


              
ssh-keygen -t ed25519 -b 2048 -C "your-mail@example.com"

入力すると、保存場所やパスフレーズに関することを聞かれます。
あくまで個人開発なので、全てReturnキーを押してしまって（デフォルトで）問題ございませんが、以下に内容を記述します。

	デフォルト	カスタマイズ
Enter file in which to save the key (/Users/UserName/.ssh/id_ed25519)	UserName配下の.sshディレクトリにid_ed25519というファイルが作成されます。	/Users/UserName/.key/my_custom_keyのように変更すると任意のフォルダ・ファイル名・場所で保存できます。
Enter passphrase (empty for no passphrase)	パスフレーズは設定されません。	任意の文字列を設定できます。パスフレーズを設定することで、秘密鍵（SSHキー）の使用時にパスフレーズの入力を要求されるようになり、キーが不正に使用されるリスクを減らせます。
Enter same passphrase again	パスフレーズは設定されていないので、そのままReturnキーを押してください。	設定した文字列を入力してReturnキーを押してください。

.sshのように.で始まるファイルを表示するには⌘+⇧+.を同時に押す必要があります。パスフレーズは入力しても何も表示されませんが、仕様なので問題ありません。

作成したファイルの場所がわからない場合は⌘+⇧+Gでファイル名を入力すると作成したファイルがある場所へ移動できます。
デフォルトの設定で進めた方は以下の2ファイルが作成できていれば、正しく手順が行えています。
また、下記のファイル名は任意のものに変えても問題ありませんが拡張子は変更しないようにしてください。

id_ed25519
id_ed25519.pub

Xserverを使ったSSHキーの作成

Xserver内でSSHキーを作成します。Xserverを使ってSSHキーを作成すると、公開鍵が自動でXserverに登録されるのでこの後のSSH接続の流れを一部省略することができます。

Xserverにログインしサーバーパネルへ移動。SSH設定をクリックして下記の画面へ移動します。

SSH設定の画面

Xserverが公開しているマニュアルがあるので、それに沿って進めていけば問題ありません。
作成する上で注意点のみ下記に記述します。

注意点

公開鍵は自動でXserverに登録されます。PCにファイルとして保存したい方は、Xserverからコピーして任意の場所に保管してください。
秘密鍵は一度しかダウンロードできません。
Xserverの場合、SSH接続で指定するポート番号は10022です。ChatGPTなどを利用しながら進めているとポート番号が22になっている場合があるので注意してください。
SSH接続をする際に、コマンドに不備がないのにエラーが出る場合があります。その際はSSH設定画面で「ON[すべてのアクセスを許可]」を設定してください。

SSH接続

GitLabとXserverをSSH接続していきます。まずは生成したSSHキーの公開鍵をXserverへ、秘密鍵をGitLabへ登録します。

Xserverへ公開鍵を登録する

XserverでSSHキーを作成した方はこちらの作業は飛ばして問題ありません。
ターミナルで作成した方は、Xserverにログインしサーバーパネルへ移動。SSH設定をクリックして下記の画面へ移動します。

公開鍵の登録

作成した公開鍵を貼り付けます。
確認画面へ進むを押して登録します。登録後は表示されませんが「登録済み公開鍵を表示」を押せば表示されるので、不安な方は確認してください。

GitLabへ秘密鍵を登録する

GItLabへアクセスし、SSH接続を行いたいプロジェクトへ移動します。
設定（Settings）> CI / CD > 変数（Variables）を開くと下記の画面に移動します。

変数

「変数の追加」をクリックし、秘密鍵を登録します。
可視化は表示を選択、変数の保護と変数参照を展開はチェック。キーの名前はDEPLOY_SSH_KEYを入力してください。ユニークな名前を設定するとSSH接続ができません。値のところに秘密鍵を入力しますが—–BEGIN OPENSSH PRIVATE KEY—–から—–END OPENSSH PRIVATE KEY—–まで全てをコピーしてペーストしてください。

秘密鍵の登録

SSH接続をする

公開鍵、秘密鍵の登録が問題なく完了していれば、ここのSTEPは飛ばしても大丈夫です。不安な方は下記の手順を実施してください。

XserverへSSH接続ができるか確認します。あなたのサーバーIDがxs123456の場合XserverへのSSH接続のコマンドは以下の形式です。

Shell


              
ssh -p 10022 xs123456@xs123456.xsrv.jp

上記のコマンドを叩くとパスワードを求められます。XserverでSSHキーを作成した方はその時のパスフレーズを、ターミナルを使ってSSHキーを作成された方はXserverのユーザーアカウントのパスワードを入力してください。
もし、ユーザーアカウントのパスワードでSSH接続ができない場合はXserverを使ったSSHキーの作成を行なってください。

[xs123456@sv12345 ~]$のように表示されればSSH接続は成功です。sv12345の部分にはあなたのサーバー番号が入ります。
無事に接続できたらexitと入力して接続を解除します。

おまけ：SSH接続のconfig設定

ssh -p 10022 xs123456@xs123456.xsrv.jpはコマンドとして少し長いので、.sshフォルダ内にconfigファイルを作成することで任意のコマンドを設定することができます。まず下記のコマンドでconfigファイルを作成します。

Shell


              
touch /Users/username/.ssh/config

configファイル内には下記を記入します。下記をコピーして使う場合//以下のコメントは削除してください。

config


              
Host xserver //ここでHost以下に記述したものが後述するssh接続のコマンドで使用されます。
HostName xs123456.xsrv.jp //ドメイン名
User xs123456 //サーバー名
IdentityFile ~/.ssh/id_ed25519 //公開鍵のファイルがある場所
Port 10022 //ポート番号(固定)

これでssh xserverとコマンドを叩くとSSH接続ができるようになります。
またSSH接続をするとknown_hostsというファイルが自動で作成されます。ここにはSSHクライアントが接続したことのあるサーバーの公開鍵が保存されます。

CI/CDパイプライン設定

.gitlab-ci.ymlファイルの作成

下記のコマンドでプロジェクトのルートディレクトリに.gitlab-ci.ymlを作成します。これはGitLabのCI/CD用設定ファイルです。

Shell


            
touch /Users/username/~（プロジェクトのルートディレクトリまでのパス）/.gitlab-ci.yml

作成が完了したら、下記を.gitlab-ci.ymlに記述します。下記では.distフォルダが本番サーバーにアップロードされるようになっています。作業環境に応じて.distの部分をアップロードしたいフォルダに変更してください。
これでmainブランチにマージすると本番サーバーへ自動でアップロードされるようになります。

yml


            
stages:
- deploy

variables:
DEPLOY_USER: "xs123456" # XserverのサーバーID
DEPLOY_SERVER: "example.com" # CI/CDパイプライン設定を行いたいドメインを指定
DEPLOY_PORT: "10022" # 固定
DEPLOY_PATH: "/home/xs123456/example.com/public_html"  # 正しいアップロード先を設定

before_script:
- 'which ssh-agent || ( apt-get update -y && apt-get install openssh-client -y )' # ssh-agent がインストールされているか確認 もしインストールされていない場合は、apt-get で openssh-client をインストール
- mkdir -p ~/.ssh  # .ssh ディレクトリを作成
- echo "$DEPLOY_SSH_KEY" | tr -d '\r' > ~/.ssh/id_ed25519  # SSHキーの保存
- chmod 600 ~/.ssh/id_ed25519  # SSHキーのパーミッション設定
- eval $(ssh-agent -s) # SSH エージェントを起動
- ssh-add ~/.ssh/id_ed25519  # SSHエージェントにキーを追加
- ssh-keyscan -p $DEPLOY_PORT $DEPLOY_SERVER >> ~/.ssh/known_hosts  # ホストキーの事前追加

deploy:
stage: deploy
script:
- set -e #エラーが発生した場合、スクリプトを即座に停止
- echo "Deploying to $DEPLOY_SERVER" #デプロイの開始メッセージを表示
- echo "Deleting existing files in $DEPLOY_PATH" #サーバー上の既存ファイルを削除する準備
- ssh -v -p $DEPLOY_PORT $DEPLOY_USER@$DEPLOY_SERVER "rm -rf $DEPLOY_PATH/*" #SSH を使ってリモートサーバーに接続し、指定されたディレクトリ内のファイルを削除
- echo "Uploading files from ./dist to $DEPLOY_PATH" #アップロードの開始メッセージを表示
- scp -v -P $DEPLOY_PORT -r ./dist/* $DEPLOY_USER@$DEPLOY_SERVER:$DEPLOY_PATH #scp コマンドで、ローカルの ./dist ディレクトリ内のファイルをリモートの DEPLOY_PATH にアップロード
only:
- main