カテゴリ一ブログ開発

2024-11-05 #TypeScript #Remix #Github

こんにちは、エンジニアのYokomachiです。

以前自分のポートフォリオサイトを作ったことがあるのですが、それから数年間ほったらかしにしていました。

最近また改めて作り直すついでに使えそうな技術スタックがないか調べていたところ、

以前から気になっていたReactベースのWebフレームワークである「Remix」にSPAモードがあるということなので使ってみることにしました。

またサイトのホスティング先はとりあえずGithub Pagesにすることにしました。

外部のサービスでホスティングするとどのサービス使ってどういうCI/CDパイプラインしていたか忘れたりするので、

ポートフォリオサイトのように重要度が高くなく、SEO考えなくていい静的Webサイトは、Github Pagesを使ってGithub上で全部完結させちゃうのもいいと思います。

ということで今回は、Remix SPAモードでWebサイトを作り、Github PagesにデプロイするGithub ActionsのCI/CDの設定をするところまでやりたいと思います。

が実はすでにRemixの中の人がGithub Pagesにデプロイするデモを公開しています。

今回はこちらの内容に沿って進めていきます。

https://www.youtube.com/watch?v=EO_-KwSslWQ

https://github.com/brookslybrand/remix-gh-pages

1 Remixプロジェクトの作成～ローカルの確認まで
2 Github Pagesの設定～CI/CD（Github Actions）の設定まで
- 2.1 Github Pagesの設定
- 2.2 Github Actions用のyamlファイルを追加
3 おわりに

Remixプロジェクトの作成～ローカルの確認まで

まずはRemixでサンプルのWebサイトを作ります。

Remixプロジェクトの作成

npx create-remix@latest

1 2	npx create-remix@latest

SPA Modeの設定

vite.config.tsにssr: false を追記するとSPAモードの設定となります。

また、basenameの設定や404.htmlを作る設定も追記します。

（https://github.com/brookslybrand/remix-gh-pages/pull/1 )


import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
import { copyFileSync } from "node:fs";
import { join } from "node:path";

declare module "@remix-run/node" {
  interface Future {
    v3_singleFetch: true;
  }
}

export default defineConfig({
  base: "/{repository_name}/",
  plugins: [
    remix({
      future: {
        v3_fetcherPersist: true,
        v3_relativeSplatPath: true,
        v3_throwAbortReason: true,
        v3_singleFetch: true,
        v3_lazyRouteDiscovery: true,
      },

      // SPAモード
      ssr: false,

      // Github Pages用basenameの設定
      basename: "/{repository_name}/",

      // GitHub Pagesにデプロイする際、/から別のルートに移動しタブをリフレッシュすると、デフォルトのGH Pages 404ページが表示されます。
      // これは、GH Pagesがすべてのトラフィックをindex.htmlに送信するように設定されていないためです。
      // これを修正するために、index.htmlと同じ内容を含む404.htmlファイルを作成できます。
      // こうすることで、ユーザーがページをリフレッシュすると、GH Pagesは404.htmlを提供し、すべてが期待通りに動作します。
      buildEnd(args) {
        if (!args.viteConfig.isProduction) return;
        const buildPath = args.viteConfig.build.outDir;
        copyFileSync(
          join(buildPath, "index.html"),
          join(buildPath, "404.html")
        );
      },
    }),
    tsconfigPaths(),
  ],
});

import { vitePlugin as remix } from "@remix-run/dev";

import { defineConfig } from "vite";

import tsconfigPaths from "vite-tsconfig-paths";

import { copyFileSync } from "node:fs";

import { join } from "node:path";

declare module "@remix-run/node" {

interface Future {

v3_singleFetch: true;

}

export default defineConfig({

base: "/{repository_name}/",

plugins: [

remix({

future: {

v3_fetcherPersist: true,

v3_relativeSplatPath: true,

v3_throwAbortReason: true,

v3_singleFetch: true,

v3_lazyRouteDiscovery: true,

// SPAモード

ssr: false,

// Github Pages用basenameの設定

basename: "/{repository_name}/",

// GitHub Pagesにデプロイする際、/から別のルートに移動しタブをリフレッシュすると、デフォルトのGH Pages 404ページが表示されます。

// これは、GH Pagesがすべてのトラフィックをindex.htmlに送信するように設定されていないためです。

// これを修正するために、index.htmlと同じ内容を含む404.htmlファイルを作成できます。

// こうすることで、ユーザーがページをリフレッシュすると、GH Pagesは404.htmlを提供し、すべてが期待通りに動作します。

buildEnd(args) {

if (!args.viteConfig.isProduction) return;

const buildPath = args.viteConfig.build.outDir;

copyFileSync(

join(buildPath, "index.html"),

join(buildPath, "404.html")

);

}),

tsconfigPaths(),

});

ローカルプレビュー

ここで一旦ローカルで動かしてみます

npx remix vite:dev

1 2	npx remix vite:dev

Remixのデフォルトページの確認ができました。

Webサイトのサンプルを書く

ポートフォリオサイトのサンプルを作成します。

ソースコードはv0で生成したものをほぼそのままコピペしています。

ここまででサンプルのWebサイトの作成は完了です。

次はCI/CDのパイプラインを作成します。

Github Pagesの設定～CI/CD（Github Actions）の設定まで

Github Pagesの設定

リポジトリのSetting > PagesからGithub Pagesの設定画面を開きます。

Build and deploymentのSourceをGithub Actionsに変更します。

Github Actions用のyamlファイルを追加

プロジェクトのルートディレクトリに.github/workflows/build-deploy.ymlを追加します。（ファイル名はなんでもいいです。）

このYAMLファイルがGithub Actionsの設定になります。

name: Build and deploy

on:
  # デフォルトブランチをターゲットにしたプッシュ時に実行
  push:
    branches: ["main"]

  # Actionsタブから手動でこのワークフローを実行できるようにする
  workflow_dispatch:

# GITHUB_TOKENの権限を設定し、GitHub Pagesへのデプロイを許可
permissions:
  contents: read
  pages: write
  id-token: write

# 同時デプロイを1つだけ許可し、進行中の実行と最新のキューにある実行の間にキューされた実行をスキップ
# ただし、進行中の実行をキャンセルしない。これにより、これらのプロダクションデプロイが完了するのを許可する
concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  # デプロイ用の単一ジョブ（デプロイのみ）
  build-and-deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Install and Build
        run: |
          npm ci
          npm run build

      - name: Setup Pages
        uses: actions/configure-pages@v4

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          # リポジトリ全体をアップロード
          path: 'build/client'
          
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

name: Build and deploy

on:

# デフォルトブランチをターゲットにしたプッシュ時に実行

push:

branches: ["main"]

# Actionsタブから手動でこのワークフローを実行できるようにする

workflow_dispatch:

# GITHUB_TOKENの権限を設定し、GitHub Pagesへのデプロイを許可

permissions:

contents: read

pages: write

id-token: write

# 同時デプロイを1つだけ許可し、進行中の実行と最新のキューにある実行の間にキューされた実行をスキップ

# ただし、進行中の実行をキャンセルしない。これにより、これらのプロダクションデプロイが完了するのを許可する

concurrency:

group: "pages"

cancel-in-progress: false

jobs:

# デプロイ用の単一ジョブ（デプロイのみ）

build-and-deploy:

environment:

name: github-pages

url: ${{ steps.deployment.outputs.page_url }}

runs-on: ubuntu-latest

steps:

- name: Checkout

uses: actions/checkout@v4

- name: Install and Build

run: |

npm ci

npm run build

- name: Setup Pages

uses: actions/configure-pages@v4

- name: Upload artifact

uses: actions/upload-pages-artifact@v3

with:

# リポジトリ全体をアップロード

path: 'build/client'

- name: Deploy to GitHub Pages

id: deployment

uses: actions/deploy-pages@v4

上記のYAMLファイルを含むソースをリポジトリにPushすると、

Github Actionsの画面でビルドが走っていることが確認できます。

Deploymentsの画面を見ると、Github PagesのURLが表示されています。

URLにアクセスすると無事ビルド後のWebサイトが表示されていることを確認できました。

おわりに

あとは好きなようにサイトを作りこんでPushすれば、Github Page上での公開までCI/CDが走るようになっています。

以前もGithub PagesやGithub Actionsを使ったデプロイはしたことがありましたが、いつの間にか設定がだいぶ簡単になったような気がします。

外部のホスティングサービス使うのは規模が大きくなってからでいいと思うので、小規模な静的WebサイトならGithub Pages使うのは結構おすすめです。

ポートフォリオサイトを公開するついでに、個人でGithubリポジトリ運用できていることのアピールにもなる…かもしれません。

この記事を書いた人
最近の記事

yokomachi

エンジニア：株式会社ギークフィード

エンジニア見習いです。

yokomachi (全て見る)

おすすめガジェット紹介！2024年12月編 - 2024-12-21
Amazon ConnectでNGワードをリアルタイムに検知してSlackに通知する - 2024-12-16
AWS Amplify AI KitでAIチャットアプリを爆速で作ってみる - 2024-12-14
AWS LambdaをC#で実装する（ついでにラムダ式を書く） - 2024-12-09
Amazon Connect Tasksの手動作成と自己割り当て、タスクテンプレートを試してみる - 2024-12-07

【採用情報】一緒に働く仲間を募集しています

2024-11-05 #TypeScript #Remix #Github

Remix SPAモードで静的WebサイトをGithub Pagesにデプロイする

Remixプロジェクトの作成～ローカルの確認まで

Remixプロジェクトの作成

SPA Modeの設定

ローカルプレビュー

Webサイトのサンプルを書く

Github Pagesの設定～CI/CD（Github Actions）の設定まで

Github Pagesの設定

Github Actions用のyamlファイルを追加

おわりに

【採用情報】一緒に働く仲間を募集しています

エンジニア募集

Asterisk13CLI_チートシート

CentOS7_チートシート

カテゴリー

月別で見る

投稿者から見る

サイト内検索

Remix SPAモードで静的WebサイトをGithub Pagesにデプロイする

Remixプロジェクトの作成～ローカルの確認まで

Remixプロジェクトの作成

SPA Modeの設定

ローカルプレビュー

Webサイトのサンプルを書く

Github Pagesの設定～CI/CD（Github Actions）の設定まで

Github Pagesの設定

Github Actions用のyamlファイルを追加

おわりに

【採用情報】一緒に働く仲間を募集しています

関連投稿

Twilio Flex v2.x.x系でLINE連携を実装する方法

[会話型AI活用]Amazon LexとConnectでシーン別にお花をレコメンドする仕組みを作ってみた

[Amazon Connect]東京リージョンで電話番号取得に時間がかかる理由を調べてみた – Amazon Connect アドベントカレンダー 2024

おすすめガジェット紹介！2024年12月編

Synology NASとAmazon CLIの連携を試してみました！

【入社エントリ】エンジニア6年生の転職活動

エンジニア募集

Asterisk13CLI_チートシート

CentOS7_チートシート

カテゴリー

月別で見る

投稿者から見る

サイト内検索