ポートフォリオ | そーたの技術ブログ https://blog.so-ta.net/ ハマったことをまとめる Sat, 12 Dec 2020 10:41:41 +0000 ja hourly 1 https://wordpress.org/?v=5.5.7 https://blog.so-ta.net/wp/wp-content/uploads/2019/08/cropped-face3-32x32.png ポートフォリオ | そーたの技術ブログ https://blog.so-ta.net/ 32 32 Googleドメインのサブドメインをgithub Pagesで利用する https://blog.so-ta.net/portfolio/googlo-subdomain-github-pages/ https://blog.so-ta.net/portfolio/googlo-subdomain-github-pages/#respond Sat, 05 Sep 2020 08:57:39 +0000 https://blog.so-ta.net/?p=666

なぜやるか

一個前の記事の続きです.
github Pagesのドメインはデフォルトでは

「http(s)://user名.github.io/ repository名」
こんなURLになっています. 全然これでもいいんですが, せっかく自分のドメインを持っているので使おうと思います.

前提

デフォルトのURLでサイトが正しく表示されること

手順

github Actionsの設定

もしgithub Actionsを使わない場合はこの節をスキップしてください.

前回作成したymlファイルにwith.cnameを追加します. 内容はデプロイするURL(ここではportfolio.so-ta.net)です.

name: deploy

on:
  push:
    branches:
      - master

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      - name: Setup Node
        uses: actions/setup-node@v2.1.0
        with:
          node-version: "12.x"

      - name: Cache dependencies
        uses: actions/cache@v2
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-

      - run: npm ci
      - run: npm run build

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./build
　　　　　　// 以下を追加↓
          cname: portfolio.so-ta.net

github pagesの設定

リポジトリのsettingタブを開き, 下の方にいくとgithub pagesの設定画面があります.
そのなかのCustom domainを自分が利用したいURLにしてください.
自分は独自ドメイン「so-ta.net」のportfolioというサブドメインを
利用したかったので以下のように変更しました.

ついでにHTTPSにするためチェックをつけます.
チェックできない場合がありますが, これは時間がかかる時があるらしいので待ちましょう.

googleドメインの設定

次にgoogleドメインの設定をします.
ここからマイドメインにアクセスし, サイドバーからDNSを開いてください.
DNSの1番下にカスタムリソースコードの設定画面があると思います.
CNAMEレコードでサブドメインと転送先のドメイン名を入力してください.
転送先ドメインは自分のgithub.ioです.


これで指定のURL(今回はportfolio.so-ta.net)にきた際にgithubのドメインに転送することができました.

package.jsonの設定

最後にpackage.jsonを以下のようにすればOKです.

"homepage": "https://portfolio.so-ta.net/"

参考

GitHub Pagesに独自ドメインを設定してHTTPS化する
5月1日のThe Github blogで「Custom domains on GitHub Pages gain support for HTTPS」という記事が投稿されました。何の話かというと独自...
mae.chab.in

]]> https://blog.so-ta.net/portfolio/googlo-subdomain-github-pages/feed/ 0 Reactアプリをgithub Pages, Actionsでデプロイ https://blog.so-ta.net/portfolio/react-github-pages-actions/ https://blog.so-ta.net/portfolio/react-github-pages-actions/#respond Fri, 04 Sep 2020 14:30:34 +0000 https://blog.so-ta.net/?p=628 やりたいこと

feature/〜ブランチつくってdevelopブランチにプルリク, ある程度まとまったらdevelopブランチをmasterへプルリクして開発したい.
そのときmasterの変更があったときにだけgithub Actionsでビルド, 出力をgithub pagesでホスティングしたい.

なぜやるか

正直, ポートフォリオみたいに一人かつ複雑ではないものを作るだけならこんな遠回りしなくても普通にこんな感じで直接masterブランチにプッシュすればいい.
でもやっぱりいつかチーム開発にはもちろんこんな感じになるし多分, あとCI/CDを意識した方が今後役に立つから…

github Actionsとgithub pages使ってみたかったし,

なによりかっこいいのでやりました.

前提

react-create-appでアプリを作っている前提とします.
今回やるのはmasterブランチに変更があったらデプロイされるところまでです.

手順

ビルドの確認

npm run start
npm run build

コマンドを実行してlocalhostで動くか確認と正しくビルドできるかの確認をしましょう. CI/CDの部分を作るのにそれ以前の問題になってしまいます.
なぜこんな初歩的なことを言うのかというと僕がこれを怠ったため時間を無駄にしてしまったからです. ちゃんと確認しましょう.

具体的な確認

  • localhost:3000に意図しているページが表示されているか.
  • buildコマンドで/buildディレクトリが作成され, 中にそれっぽいものが入っているか

確認が終わったらmasterへプッシュしてしまいましょう.

github Actionsのymlを書く

/.github/workflows/ディレクトリの中にymlファイルを書くとgithub君はgithub Actionsとして認識してくれます.
以下は僕が作成したものです.

name: deploy

on:
  push:
    branches:
      - master

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      - name: Setup Node
        uses: actions/setup-node@v2.1.0
        with:
          node-version: "12.x"

      - name: Cache dependencies
        uses: actions/cache@v2
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-

      - run: npm ci
      - run: npm run build

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./build

やってること

  1. masterブランチがpushされたときにイベント発火
  2. ubuntu環境をセット, npm もいれる
  3. npm ci でパッケージをインストール
  4. npm run buildでビルド, 出力はデフォルトで./buildへ吐き出される
  5. ./buildにあるファイルをgh-pagesブランチにコミット

それではファイルをmasterにpushしてください.
するとgithub Actionsが動いているはずです.

github上の設定

最後にgithub pagesの設定を行います.
リポジトリのsettingタブを開いてください. 下の方にgithub pagesの設定項目があります.


先ほどのgithub Actionsでgh-pagesブランチができているはずなのでそれを選択してください.

すると画像の緑の部分のようにメッセージがでます.
そのURLがデプロイ先になりますが, まだ正常なページが表示されません.

package.jsonにhomepageを追加

package.jsonに以下の記述を追加してください

"homepage": "デプロイ先のURL"

デプロイ先のURLは先ほど確認した緑の部分に表示されているURLにしてください. これがないとcssなどが404になってしまいます.

さいごに

勝手にデプロイされるのってなんかいいですね.
あと独自ドメインでホスティングする方法は別記事に書きます.

参考

GitHub - peaceiris/actions-gh-pages: GitHub Actions for GitHub Pages 🚀 Deploy static files and publish your site easily. Static-Site-Generators-friendly.
GitHub Actions for GitHub Pages 🚀 Deploy static files and publish your site easily. Static-Site-Generators-friendly. - GitHub - peaceiris/actions-gh-pages: GitH...
github.com
 ]]> https://blog.so-ta.net/portfolio/react-github-pages-actions/feed/ 0