背景

機能の内容は言えませんが、外部ＡＰＩを利用した既存の機能の簡易版のツールを作りたい。そういった依頼が舞い込んできました。
すでにその機能は提供されていますが、画面仕様のもと多くの項目の入力が必要で、客先でさくっと処理させるには不向きでした。
そのため、既存機能の登録機能のみを切り出してほしいとのことでした。
二つ返事で了承。
今後のことを考えフロントエンドは別プロジェクトにし、ＡＰＩは既存のものを利用。
外部のＡＰＩはフロントエンドでのスクリプト読み込み後のAjax送信とサーバーサイドでのポストの処理があり、特定のホスト名と特定のＩＰにしか対応してませんでした。
それは困った。
ということで、nuxtで静的サイトとしてgenerateしたものを既存のプロジェクトでホスティングさせてしまえば、ホスト名とＩＰの課題は解決するということでやり方を書いておきます。

※ソースは抜粋しか載せられないのでその点はご理解ください。

流れ

nuxtでプロジェクトを作成しgenerateすることで静的サイトへ
golangとechoでできた既存システムでgenerateした静的サイトをホスティング
リリース方法を検討していい感じにリリースできるようにする。

nuxtでプロジェクトを作成しgenerateすることで静的サイトへ

ソースを載せられないのでいい感じにご自身で実装してください。

静的サイトへgenerate

なんのこっちゃない。あまりやったことないがとりあえずlocalで

yarn generate

generate?めんどくさいのでpackage.jsonをいじって

package.json

"gen": "nuxt generate",

yarn gen

distに静的なファイルが出力されました。静的なファイルっていうくらいなので、要はＨＴＭＬを生で書いたのと同じ状態ですよね？ということで、ブラウザでこのファイルを開く
おや？スクリプト（画面のイベント）が発火してない？そんなことある？どうやらnuxt generateしても、ルート情報が正しくないと、生成されたスクリプトを読み込めないらしい。この場合だと当然、/hoge/hoge/index.htmlでアクセスしてる。少し調べるとわかりますが、どうやらgithubpageやnetlifyやS3でホスティングしないと正常に動かないらしい。なるほど。

じゃあ、当社で使っているbacklogで「ブラウザで直接開く」なるものがあるので、まずはそいつでホスティングさせてみましょう。

backlog「ブラウザで直接開く」で開いても正しく動かない。
なるほど。ＵＲＬ見ればわかるが、これはＨＴＭＬをただブラウザで開いてるだけか。。。ホスティングサービスとは別物。。。
gitと名乗る以上極力githubに寄せてほしいところだが、できないものはできないのでどうしようもない。
じゃあ、githubでpage作るか。
はい、そうです。金払わんとできない。金はない。やめる。
じゃあ、いったんnetlifyで。
いける！どうやらホスティングさせてあげれば正しく動くみたい。ということが分かったので、nuxtはこんなところにしておく。
ホスティングする際のエントリーポイントをルートに追加
http://hostname/nuxtprojectで受ける予定なので、nuxt.config.jsに以下を追加

  router: {
    base: '/nuxtproject' 
  }

golangとechoでできた既存システムでgenerateした静的サイトをホスティング

まずはgitから落としてプロジェクトへぶっこむ

cd echoproject
git clone <nuxtprojectURL>

echoのプロジェクト直下にぶっこむ。
depやglideで入れたかったのですが、なかなかてこずってできなかったので、直接ぶっこむ。

次にgenerateする

cd nuxtproject
yarn gen

後で、distもリポジトリにぶっこむつくりにしますが、いったんはこんな感じでOK.

ホスティングする

非常に簡単。やっぱりFWって素晴らしい。

e.Static("/nuxtproject", "nuxtproject/dist")

http://hostname/nuxtprojectへリクエストが来たらnuxtproject直下のdistのindex.htmlを返すっていう意味。

これだけでOK。

nuxtprojectを編集した際は毎回cloneしてgenerateする必要があるよ。

こっからいろいろ考える。

パッケージ化しようとしたけど、うまくできなかったので、以下の流れで本番のモジュールに組み込む

distをリポジトリ保存する。
echoprojectのデプロイ時にcloneする。
環境により変更すべき値を考慮する。

distをリポジトリ保存する。

.gitignoreでdistを外し、yarn generateした後にpushする。
さすがに毎回手でやるのはだるい。本当ならビルド環境用意してそいつにやらせてあげればいいのだけれども、サーバー用意するのがめんどいうえ、金がない。
なのでローカルで必ずやるようにする。
どうやらgitの機能にHookがあるらしい。
コミット前、プッシュ前様々なタイミングでフックができるらしいが、今回はコミットする前を選択。
.git/hooks/pre-commitにコマンド書いとけばいいらしい。

#!/bin/sh
yarn
yarn gen
git add .

exit 0

インストールして静的なファイルを生成、できたファイルを管理対象にして終わり。pushは自分でやるこれで常にdistが最新される。

echoprojectのデプロイ時にcloneする。

本来ならここでビルドすればよいのだが、dokerのイメージにnuxtとnodeとnpmとyarnを入れるのは避けたかったので、クローンするだけ。その際今回のnuxtprojectはパブリックなリポジトリではないので、いじいじする。
gitはnetrcの認証情報をもとにリポジトリからとってくることができるらしい。じゃあ簡単だ。
echoprojectにechoproject_nutrcをまずは作ります。

# 自分の情報を設定してね。
machine <git_host>
login <git_user_id>
password <git_user_pwd>

これをdockerfileで ~/.netrcにしてやればOK

RUN cp echoproject_nutrc ~/.netrc

環境により変更すべき値を考慮する。

当然開発環境と本番環境は分かれてまっせということ。
echoprojectではENVという環境変数で振り分けてますが、nuxtはどうしましょう。
よし、どちらもgenerateしてホスティングするdistの名称を変えればOKじゃね？ということでそのようにします。

nuxt.config-dev.jsを作る
nuxt.config-dev.jsでgenerateの際の出力フォルダを指定

  generate: {
    subFolders: false,
    dir: './dist_dev'
  },

package.jsonに下記を追加

"gen-dev":"nuxt generate --config-file nuxt.config-dev.js",

.git/hooks/pre-commitにyarn gen-devを追加

これでdistとdist_devができるので後はechoprojectでdistをホスティングするのかdist_devをホスティングするの指定してあげればOK。

非常にむりやりではありますが、今回はこのようにしましたとさ。

nuxtで作った静的ファイルをgolangのechoでホスティングする。

背景

流れ