Pagesにデプロイしてみた。Pagesにデプロイしてみた。まことさんがUdemyにて公開している「フロントエンド技術入門」にチャレンジしてみました!www.udemy.com本来なら、全てのレクチャー(07:58:23)を最初から受けたいところですが、小さい子供がいる家庭ではそんな時間は取れるわけもなく。CLIで、SPAを開発しよう」のメモアプリを作成しました。Pagesで公開する方法の記事です。作業GitHubにnotepadプロジェクトを上げるレクチャー通りに作業を進めていれば、「notepad」というディレクトリ配下でプロジェクトの開発を行っていると思います。GitHubでリポジトリを作成し、「notepad」配下の資産をpushします。Pagesを使う場合はリポジトリをPublicで作成する必要があります。Pagesで公開する場合、URLは以下になります。https://username.github.io/repositoryその為、そのままの設定では公開後のCSSなどが404で見つからずサイトが正しく表示されません。対策として、vue.config.jsのpublicPathにrepository名を設定する事で、サブパスでのアクセスを可能にします。Actionsではデフォルトの環境変数がいくつか存在し、その中のGITHUB_REPOSITORYにて、所有者名を含むリポジトリ名(例:octocat/Hello-World)を取得できます。その為、publicPathに設定したいリポジトリ名を環境変数から動的に取得して設定しています。(リポジトリ名だけを含む環境変数は見受けられませんでした。Actionsを作成するデプロイを自動化する以下のworkflowを追加します。Pagesへのデプロイについては、actions-gh-pagesというActionsを利用しています。github.combuildを実行するとデフォルトでdist配下にソースが格納されるので、publish_dirには./distを設定しています。Actionsが実行され、gh-pagesというブランチが作成されます。ブランチを切り替えてみるとわかりますが、これはactions-gh-pagesActionsにて作成された、./dist配下のソースだけが格納されたブランチです。PagesではこのブランチをSourceとして設定します。PagesのURLにアクセスすると、作成したメモアプリが表示されます。Pagesのパスによる問題は、他にも対処法があるようでしたが、なるだけレクチャーの内容には手を加えないようにする為、新規にvue.config.jsを追加する方法にしました。汎用的に使えるようにpathについては、環境変数から値を設定できるようにしました。(4)はてなブログをはじめよう!dehio3さんは、はてなブログを使っています。ブログを報告する引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。