GitHub Pagesにデプロイする

# はじめに
以前の記事 [Vue.jsプロジェクト開発を始める](https://qiita.com/e-onm/items/afbbce1902a9b7c62349) で、
ルーティング設定を理解するために簡単なサンプルページを作成しました。

次は自分が作成したアプリを外部公開してみたい…けどどうやったらいいんだろう…
と悩んでいたところ、GitHub Pagesという便利な機能があることを教えてもらいましたので
今回はこちらをさわってみます。

# 環境
## OS
- macOS Mojave バージョン10.14.6
 
## 事前準備
- GitHubアカウント
- デプロイしたいWebプロジェクト

# 目標
GitHub Pagesを使ってWebページを外部公開する。

# やったこと

## まずはGitHub Pagesの概要を学ぶ

[GitHub Docs_GitHub Page を使う](https://docs.github.com/ja/github/working-with-github-pages)
>GitHub Pages は、GitHub のリポジトリから HTML、CSS、および JavaScript ファイル を直接取得し、任意でビルドプロセスを通じてファイルを実行し、ウェブサイトを公開できる静的なサイトホスティングサービスです。 

要点としては

- `http(s)://<username>.github.io/<repository>` で公開できる
- 公開元は master ブランチ

どちらも設定次第で変更することができます。


## GitHubから設定する

リポジトリ > Settings > GitHub Pages

|![スクリーンショット 2020-07-10 13.45.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395809/38aa08d7-c4c6-124f-1fcb-2ab7b03f2554.png)|
|:-:|

↓ Sourceを選択すると表示項目が増えます。

|![スクリーンショット 2020-07-10 14.04.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395809/5d46d81b-cad5-1756-290b-65752a1a1d84.png)|
|:-:|


今回はカスタムドメインの設定は行いません。
なので、設定はこれだけ。

## 公開されたURLにアクセスしてみる

|![スクリーンショット 2020-07-10 14.15.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395809/26d08e9e-1d33-55ca-8463-cf66e98ee655.png)|
|:-:|

真っ白です

## 解決したい

Consoleを確認。エラーは出ていません。

|![スクリーンショット 2020-07-10 15.33.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395809/ee1455cd-cca6-30d2-2ed9-ec63f36acc24.png)|
|:-:|

Sourceを確認。

|![スクリーンショット 2020-07-10 16.03.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395809/bde0f9a4-f3bf-eb74-4701-9c9f29ec9a88.png)|
|:-:|
ローカルではApp.vueファイルの内容を表示できていたのですが、(index)というファイルしかありません。
`<!-- built files will be auto injected -->`
この辺りに原因がありそうです。

### buildする

```
$ npm run build

> {プロジェクト名}@1.0.0 build {ローカルリポジトリ}
> node build/build.js

Hash: 2faa1744e547d116c616
Version: webpack 3.12.0
Time: 16424ms
                                                  Asset       Size  Chunks             Chunk Names
               static/js/vendor.096d28cd4f5da166f9ce.js     123 kB       0  [emitted]  vendor
                  static/js/app.d36189bbcccbc977a527.js    1.29 kB       1  [emitted]  app
             static/js/manifest.2ae2e69a05c33dfc65f8.js  857 bytes       2  [emitted]  manifest
    static/css/app.86a4513a3e04c0dcb73e6d6aea4580e4.css  237 bytes       1  [emitted]  app
static/css/app.86a4513a3e04c0dcb73e6d6aea4580e4.css.map  452 bytes          [emitted]  
           static/js/vendor.096d28cd4f5da166f9ce.js.map     618 kB       0  [emitted]  vendor
              static/js/app.d36189bbcccbc977a527.js.map    9.71 kB       1  [emitted]  app
         static/js/manifest.2ae2e69a05c33dfc65f8.js.map    4.97 kB       2  [emitted]  manifest
                                             index.html  508 bytes          [emitted]  

  Build complete.

  Tip: built files are meant to be served over an HTTP server.
  Opening index.html over file:// won't work.

```

distディレクトリにファイルが格納されました。
![スクリーンショット 2020-07-10 16.52.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395809/854f1b64-abd9-c36f-31b3-6568c70e52b8.png)

これをpushしてmasterブランチに反映させればいいのかと思ったのですが
`.gitignore` に `/dist/` が含まれています。

```
$ git status
On branch develop
nothing to commit, working tree clean
```

.gitignoreから外せばいいんでしょうか？
いや、きっとそんなことしなくてももっといい方法があるはず…

### いい方法があった

[公式](https://docs.github.com/ja/github/working-with-github-pages)より
>プロジェクトサイトは、master ブランチまたは master ブランチ場の /docs フォルダから公開することもできます。これらの公開元からサイトを公開するには、別の公開元を設定する必要があります。

masterブランチに/docsというフォルダがあれば、そこを参照して公開してくれるらしい。
今/distに作成されているbundleファイルを/docsに作られるようにして、そのをpushすればいいのでは…？

#### /docsを作る

```
$ mkdir docs
```

#### bundleファイルが/docsに格納されるようにする

buildパスをdistからdocsに変更します。
config/index.jsを以下のように修正。

```
$ git diff config/index.js
diff --git a/config/index.js b/config/index.js

--- a/config/index.js
+++ b/config/index.js
 
   build: {
     // Template for index.html
-    index: path.resolve(__dirname, '../dist/index.html'),
+    index: path.resolve(__dirname, '../docs/index.html'),
 
     // Paths
-    assetsRoot: path.resolve(__dirname, '../dist'),
+    assetsRoot: path.resolve(__dirname, '../docs'),
     assetsSubDirectory: 'static',
```

#### build

```
$ npm run build
```
![スクリーンショット 2020-07-10 17.56.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395809/4b17eea3-a5e9-ea4d-ab27-4f278405fb10.png)

docs配下にできました。

#### .gitignoreいじらずにそのままpush
```
$ git add .
$ git commit -m 'built'
$ git push origin develop
```
GitHubでdevelop -> master にマージ

#### GitHub Pagesに/docsをみてもらう

Setting > GitHub Pages
フォルダを作成したことで選択肢が増えました。master branch /docs folderを選択。
![スクリーンショット 2020-07-10 18.04.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395809/d81453e0-cb4f-2f90-23bb-20dec8cb036b.png)


#### URLアクセス
エラーです。

|![スクリーンショット 2020-07-10 18.06.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395809/fa1d7180-7df5-fd33-9488-58dae90f41f6.png)|
|:-:|

#### Pathの設定を修正

先ほどエラーになった画面でsourceをみてみると

```index.html
<script type=text/javascript src=/static/js/manifest.3ad1d5771e9b13dbdad2.js></script>
<script type=text/javascript src=/static/js/vendor.096d28cd4f5da166f9ce.js></script>
<script type=text/javascript src=/static/js/app.d36189bbcccbc977a527.js></script>
```
ソースの参照先が絶対パスになっていました。

ここでは**index.htmlからみたファイルパス**を指定してあげる必要があるので
config/index.jsのassetsPublicPathを以下のように修正します。

```
$ git diff config/index.js
diff --git a/config/index.js b/config/index.js

--- a/config/index.js
+++ b/config/index.js

     // Paths
     assetsRoot: path.resolve(__dirname, '../docs'),
     assetsSubDirectory: 'static',
-    assetsPublicPath: '/',
+    assetsPublicPath: './',
 
     /**
      * Source Maps
```

#### URLアクセス

できました:thumbsup::thumbsup::thumbsup:

|![スクリーンショット 2020-07-10 18.26.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395809/52c2ed8d-7efd-1864-233c-417b91229f33.png)|
|:-:|

ファイル参照が相対パスに代わり、正しく読み込まれるようになっています

```index.html
<script type=text/javascript src=./static/js/manifest.3ad1d5771e9b13dbdad2.js></script>
<script type=text/javascript src=./static/js/vendor.096d28cd4f5da166f9ce.js></script>
<script type=text/javascript src=./static/js/app.d36189bbcccbc977a527.js></script>
```

# 助けてもらったサイト
>[GitHub PagesにサクッとSPAをデプロイする](https://qiita.com/teinen_qiita/items/04522a76c239e9998856)
[GitHubのmasterブランチをWebページとして公開する手順（GitHub Pages）](https://qiita.com/tonkotsuboy_com/items/f98667b89228b98bc096)
[vue-cliで作ったアプリをGithub Pagesにデプロイ](https://qiita.com/msrks/items/67dbfba84bc635d7337c)