音ゲー、fps、DTM、プログラミング雑記置き場

ブログタイトル通りに雑記を垂れ流す。

Nuxt.jsのWebアプリケーションをGitHub.ioにデプロイする

プログラミング 情報系


  • Nuxt.jsですでに何かしらの成果物を作成しているのが前提
  • Nuxt.jsでWebアプリケーションを作成しようという記事ではなく、タイトル通りGitHub.ioにGit経由で、 既に作成済みのNuxt.jsアプリをデプロイする手順を記載した記事となっている

Nuxt.jsについて

  • Nuxt.jsはサーバのフレームワークなどWebアプリケーション開発に必要な物を一括で最初に取得できる
  • SSR(Server Side Rendering:サーバ側でHTML生成を行う)やPWA(Progressive Web Apps:スタンドアロンなアプリにも対応できる)なWebサイトも構築可能
  • 似た機能にVue-cliがあるが、こっちは最低限の設定（情報）でSPA構築ができ、必要に応じてサーバ用の設定等をするイメージ
    • 使い分けは小規模開発ならVue-Cli、大規模またはSSR,PWAに対応したい場合はNuxt.jsという感じらしい

導入方法

  1. npx create-nuxt-app [プロジェクト名]
    • npxはnpmのコマンド、yarnを使っている場合は使えない
  2. 対話形式で使用するフレームワーク等を求められるので適宜答える
  3. npm run dev
    • [プロジェクト名]のディレクトリが作成する
    • 動作を確認する。デフォルトはlocalhost:3000でサーバが建つのでそこにアクセスする

プロジェクトのファイル構成

  • 使用したフレームワークによって多少の差異がでるが、一般的に下記のような構成になる

    • .nuxt : npm run devで生成されるファイル群
    • static : アプリケーションで使用する素材（画像等）を置く
      • ここに置かれたファイルをwebpackのコンパイラの対象にならない
    • assets : アプリケーションで使用する素材（画像等）を置く
      • 逆にここに置かれたファイルでwebpackのコンパイラの対象になる
      • 容量の大きいファイルはここに置くといい？
    • components
    • dist : デプロイ用のファイル群
      • npm run generateで作成される
    • layouts : pages内のVueファイルに追加するコンポーネント（ヘッダー等）のVueファイル
    • middleware
    • pages : index.vue筆頭にメインのコンテンツのページを作成する
    • plugins
  • server : バックエンド側の処理を書くフォルダ

ルーティングの実装

  • ルーティングはpagesディレクトリを参照して動的に生成されるので、
    ページのどこにそのリンクを貼るかだけを設定すればよい
  • <nuxt-link to="path">で設定可能。Vuetifyの場合はnuxt属性をtrueにする

  • 下記はVuetifyのv-btn要素にルーティング処理をハンドルさせた例

  • pagesディレクトリの構成

index.vue 
linkPages/ -- linkPageA.vue
  • index.vue(pugで記述)
v-btn(text color="green" outlined coler="green" to="/linkPages/linkPageA" nuxt) To PageA

GitHubPagesのデプロイ

  • 参考ページ

  • 注意点としてGitHubPagesはユーザページとリポジトリページに2種類がある

    • ユーザページ：<ユーザ名>.github.ioでリポジトリを作成することで使用可能
      • masterブランチでないと反映されないので注意
    • リポジトリページ：各リポジトリでgh-pagesブランチを作成することで使用可能
    • また、今回の記述方法だとmasterのコミットメッセージが残せない、
      作業用ブランチのコミット等がGitHubのcontributionsに反映されない等の問題が残るが、デプロイ自体は正常に行われているためこの対策は行わなかった

  • 以下手順

    • 開発環境構築
      1. <ユーザ名>.github.ioリポジトリをリモート(GitHub)で作成し、ローカルにcloneする
      2. masterブランチとは別に作業用ブランチを好きな名前で作成する
      3. Nuxt.jsでアプリケーションのひな形を作成する(上記導入方法を参照)
    • デプロイ（初回のみ）
      1. npm i push-dir -D
        • masterブランチにdist/のみをpushするのに使うパッケージのインストール
      2. package.jsonのscriptsに"deploy": "push-dir --dir=dist --branch=master --cleanup"を追記
        • これでdeployコマンドがdist/以下をmasterに反映させる処理になる
      3. ローカルのmasterを削除する
        • リモートのmasterとの整合性を保つため
      4. touch .nojekyllでファイル作成し、git add>git commit
        • 中身は空のままでいい。githubPagesがnojekyllがデフォルトで設定されている。
          そのため、nojekyllでレンダリングさせたくない、もしくは既に別のレンダリング設定をしている場合はこの作業が必要
          (今回は後述した理由で行っている)
    • デプロイ（毎回）
      1. npm run generate
        • これでdist/が作成（更新）される
      2. npm run deploy
        • エラーが出る場合、作業用ブランチが最新でない可能性があるのでcommitしておく
        • もしくは未commitのファイルがあるパターン。これはさっさとcommitしてpushする
      3. github.com/<ユーザ名>/<ユーザ名>.github.ioにアクセスして変更内容が反映されているか確認
        • 反映されるまで時間がかかることができる