Reactで作ったSPAをGitHub Pagesで公開する

今月の更新だよん。こういう記事は普通Qiitaに投稿するけど、制作物の関係でこっちに書くことにする。

仕事でフロントばかり触っているので、入社1年目でVue、React、Angularを全部一通り触ることになってる。実際バリバリ書いてるのはAngularで、VueとReactは半分研修で書いただけだけど。

で、まあ個人開発でも使ってみるかってことで一番使い勝手の良さそうなReactで簡単なSPAを作ってみた。最近はTypeScriptしか書けん。

marron-akanishi/Nao
React Study App. Contribute to marron-akanishi/Nao development by creating an account on GitHub.

単純なものでアイドルのプロフィールとミリシタに実装されているカードを閲覧できるサイト。ちなみにPWAに対応しているので、インストールすれば単体アプリのように起動することが可能、あんまり意味ないけど。あと、今回CSSフレームワークを何も入れなかった関係でレスポンシブデザインにするのが面倒だったので、横768px以上のデバイスでないと表示されません。スマホから見に行っても基本的に見れないはず。(横向きにすれば見れるかも)

このリポジトリは半分雛形のようなもので、以下の環境で開発できるようになってる。

  • 言語はTypeScript
  • スタイルはSCSSを利用、Scope化済み
  • PWAに対応
  • GitHubのmasterブランチにPushすれば自動的にgh-pagesブランチにデプロイされる

結構簡単にできることだけど、すぐ忘れてしまうので一応メモがてらにこの環境をどの順番で構築するかを書いておこうかなと。仕事でも毎日学んだことを日報として書いていたりするのだ。偉い!

…これ作ったの、先週の4連休だけど。

 

開発環境はWSL2上のUbuntu 18.04で、ここにVS CodeのRemote Developmentで接続して開発してた。めっちゃ便利ね、これ。

React環境構築

大前提としてnodejsとyarnは入ってるものとする。nodejsはv14.6.0を使ったよ。若干古いのは気にしない。

Reactのアプリケーションテンプレートはcreate-react-appという便利なコマンドがあるのでこれで作成する。

npx create-react-app {プロジェクト名} --template typescript

これでTypeScriptを使ったテンプレートが出来上がる。超簡単。ちなみにこの時点でPWAに対応してる。テストも入ってる。消したけど。

SCSSを使えるようにする

ただ、このままだとCSSを書くことになる。仕事では基本SCSSしか書いてないので、こっちで書けるようにしたい。コマンドを叩くだけで対応可能。

yarn add node-sass

あとはすでにあるcssファイルの拡張子をscssに変えれば利用できるようになる。tsxファイル内にも書いてあるはずなので、忘れずに変更しておく。

これでyarn startを叩けば、サンプルページが表示されるはず。やった!

Scoped CSSを利用できるようにする

ただ、このまま書いていくとコンポーネントを分けていたとしても同じclass名を利用するとスタイルがぶつかる。これは非常に不便。

ということでScoped CSSが使えるようにする。

🦄 How to scope your CSS/SCSS in React JS ⚡️
Hi guys ! 🤗 Next article about React JS! Last week we talked about How to build a complete Modal Com…

まず、cracoというシステムを利用するのでこれを突っ込む。

gsoft-inc/craco
Create React App Configuration Override, an easy and comprehensible configuration layer for create-react-app – gsoft-inc/craco

Readmeに書いてある通りに進めればOK。craco.config.jsは作るだけで中身は現時点では空っぽで大丈夫。

次にScoped CSSにしてくれるプラグインを導入。

yarn add craco-plugin-scoped-css --dev

なぜかこれだけdevDependenciesに入ることになるけど、まあいいでしょ。

次にcraco.config.jsにプラグインを使うように記述。

module.exports = {
  plugins: [
    {
      plugin: require('craco-plugin-scoped-css')
    }
  ]
}

これであとは作成するscssファイルの命名を[name].scoped.scssにすれば自動でScoped CSSにしてくれる。便利。この命名規則はconfigで変更できるらしい。

ハマるとしたらpackage.jsonの書き換えなので、忘れないように。あと、tsx内でのimport文もちゃんとscoped付きにすること。

ここまででいい感じに開発できるようになった。あとはデプロイできるようにしよう。

GitHub Actionsを使ってGitHub Pagesにデプロイ

これに一番引っかかった。書くのは面倒なので、Naoのリポジトリから.githubディレクトリごとコピーするのが簡単かも。

GitHub Actionsを使ってGitHub PagesにReactアプリを公開する – Qiita

背景・動機

先日、以下の記事で簡単なReactアプリを開発した話を投稿しましたが、masterへpushで簡単にデプロイしたいなと思いはじめました。
https://qiita.com/nouka/items/a4c25ce68…

基本的にこれに従って作っていったけど、Naoに入ってるbuild.ymlはnodejsのバージョンを上げていたり、peaceiris/actions-gh-pagesをv3にしていたりする。最初の公開鍵と秘密鍵の登録だけすればそのまま使えるはず。

忘れてはいけないのがpackage.jsonにhomepageで公開場所のURLを書いておくこと。これをやらないと内部での参照がすべて/になるので、きちんと認識されない。サブドメインとかでルート直下に配置するならいいけど、リポジトリのGitHub Pagesみたいにパスがルートじゃない場所に配置される場合は記載しておかないと404になっちゃう。これにめっちゃハマった。

ビルドが完了すると自動的にgh-pagesブランチが出来ているので、SettingsでSourceに指定すれば公開される。若干反映に時間がかかるので、Pushしてから5分ぐらい経ってから見るとよい。Actionsも結構時間かかるし。

てか、本当はこんなことしなくてもgh-pagesコマンドを入れたら公開できるんですけどね。ただ単にActionsがどんな感じなのか触ってみたかっただけです。Pushしただけでデプロイしてくれるの便利だし。

 

珍しくまともな記事を書いた気がする。仕事ちゃんとやってるし、学んだことも多いぞってことで。

ではでは~。

投稿者: 赤西 真論

大阪の会社でWebエンジニアをしているミリマス大好きお兄さん

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください