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

こんにちは、エンジニアの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

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

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

Remixプロジェクトの作成

SPA Modeの設定

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

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

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

ローカルプレビュー

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

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の設定になります。

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

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

 

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

 

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

 

おわりに

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

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

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

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

この記事が気に入ったら
いいね ! しよう

Twitter で

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

採用情報
ページトップへ