GitLab pagesでReactアプリを無料ホスティングする方法(GitHub/GitLab自動連携+CI/CD)
React.jsを勉強している内に、成果物を無性に上げたくなり無料のホスティング先を探してみました。
いくつか候補はありましたが、その中でもGitHub pagesとGitLab pagesを比較して、以下の理由から今回はGitLabを選択しました。
- GitLab pagesでは独自ドメインが設定可能
- GitHub側でコードを管理して、成果物のみGitLabに上げる形にしたい
GitLabの場合、無料だとCI/CDを使ったビルド時間に400分という制限(こちらを参照)があるので、使い方によっては無料にならない点はご注意下さい。
前提条件
- GitHubアカウント
- GitLabアカウント
- Git
- Nodeとyarn(またはnpm)
すでにGitHubとGitLabアカウントを持っていることを前提とします。
ReactアプリをGitHubに上げる
この記事では、アプリの内容は無視して設定を優先したいので、create-react-app
で作られるデフォルトのアプリを使用します。
Reactアプリを作る
GitHubリモートリポジトリを作成し、ローカルにクローンします。
git clone [email protected]:USER_NAME/REPOSITORY.git
USER_NAME, REPOSITORYは自身のユーザー名とリポジトリ名で置き換える。
クローンしたローカルリポジトリに移動し、以下のコマンドでReactアプリを作ります。
npx create-react-app .
作ったら早速動作を確認します。
yarn start
GitHubに上げる前の設定
動いたらGitHubに上げる前に2つ設定を行います。
1つ目はpackage.json
の編集です。
GitLab pagesでは次のようなpage URLがデフォルトです。
https://USER_NAME.gitlab.io/PROJECT_NAME
URLに適切に紐付けるためにpackage.json
ファイルの先頭にhomepage
プロパティを追加して、値としてプロジェクト名を入れて下さい。
次のmy-react-app
がプロジェクト名にあたります。
{
"homepage": "my-react-app",
"name": "my-react-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
},
2つ目にCI/CDパイプライン用のファイルを設定します。
このパイプラインを設定することで、
- ローカルからGitHubにPush、またはブランチのマージなどを行う
- 自動的に更新内容がGitLabにPushされる
- GitLab上でパイプラインが働き、自動的にアプリのビルドされGitLab Pagesにデプロイされる
という流れを一連で自動化する事ができます。
設定としては.gitlab-ci.yml
という新規ファイルを作成し、package.json
と同じ階層に追加します。
以下の内容を書き込んで下さい。
image: node:16.13.0 # nodeバージョンを選択
cache:
paths:
- node_modules/ # キャッシュすることで次回以降ビルドをスピードアップ
stages:
- deploy # パイプラインで使用するステージ名
pages:
stage: deploy
script:
- rm -rf build # 既存のbuildディレクトリを削除
- yarn install # dependenciesをインストール
- yarn run build # プロジェクトのビルド
- mv public .public # 既存のpublicディレクトリ中のデータを.publicに移動
- cp build/index.html build/404.html # 必須ではない
- mv build public # build中のデータをpublicに移動
artifacts:
paths:
- public # publicディレクトリのみにアクセスを許可
only:
refs:
- main # GitLab pagesのコンテンツはmainブランチにデプロイ
設定が完了したら作ったアプリをGitHubのリモートリポジトリにプッシュします。
git add .
git commit -m "init"
git push origin main
GitHubとGitLabを連携させる
GitLabにログインし、New Project/Repositoryに進み、Run CI/CD for external repositoryを選択します。
Connect repositories fromでGitHubのボタンをクリックします。
Personal Access TokenからGitHubに移り、トークンを作る。
repoを選択し、Generate tokenを実行。
先程のGitLabページに戻り、生成したトークンをGitLabに登録します。
連携されなかったときの追加設定
私の場合はGitHubリポジトリをGitLab上にミラーすることは出来ましたが、その後GitHubへのPushがGitLabに自動で反映されない状態でした。
そのため追加で次のような設定を行います。
まずはGitHubのリポジトリからSSH用のURLをコピーしてきます。
なお次の作業に入る前に1点注意点があります。
GitLabでの作業でコピーしたURLを使用しますが、そのまま使用するとエラーになります。
貼り付けた後に以下のように編集することになるので注意して下さい。
GitLabで先程作成したプロジェクトのSettings > RepositoryからMirroring repositoriesの設定を行います。
先程の作業で1つMirrored repositoriesが作成されていると思いますので、こちらは削除します。
GitHubでコピーしたURLを貼付/編集の上、以下の選択を行いDetect host keysをクリックしてください。
- Mirror direction: Pull
- Authentication method: SSH public key
下のチェック項目はお好みで選択してください。
Mirror repositoryをクリックし確定します。
作成されたMirrored repositoryからSSH public keyをコピーします。
GitHubに移動し、MirrorするリポジトリでSettings > Deploy keysを選択し、新しいDeploy keyを追加します。
Keyの部分には先程コピーしたSSH public keyを貼り付けてください。
これで連携は完了です。
先程のMirror repositoryの場所に戻り、連携が行われているか確認しましょう。
なおパイプラインを有効にするためにはクレジットカードの登録が必要ですのでご注意下さい。
上のようにプロテクトの関係でGitHubからのPushが反映されずエラーになる場合は、
Settings > Repository > Protected branches
に移動し、Unprotectで対象ブランチのプロテクトを外しましょう。
これで連携は完了です。
実際にページを確認する
Settings > PagesからページのURLを確認できます。
実際に見れるか確認してみましょう。
Author And Source
この問題について(GitLab pagesでReactアプリを無料ホスティングする方法(GitHub/GitLab自動連携+CI/CD)), 我々は、より多くの情報をここで見つけました https://qiita.com/monji_007/items/6c729ea2ce7a442d7b16著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .