背景
機能の内容は言えませんが、外部ＡＰＩを利用した既存の機能の簡易版のツールを作りたい。そういった依頼が舞い込んできました。
すでにその機能は提供されていますが、画面仕様のもと多くの項目の入力が必要で、客先でさくっと処理させるには不向きでした。
そのため、既存機能の登録機能のみを切り出してほしいとのことでした。
二つ返事で了承。
今後のことを考えフロントエンドは別プロジェクトにし、ＡＰＩは既存のものを利用。
外部のＡＰＩはフロントエンドでのスクリプト読み込み後のAjax送信とサーバーサイドでのポストの処理があり、特定のホスト名と特定のＩＰにしか対応してませんでした。
それは困った。
ということで、nuxtで静的サイトとしてgenerateしたものを既存のプロジェクトでホスティングさせてしまえば、ホスト名とＩＰの課題は解決するということでやり方を書いておきます。
※ソースは抜粋しか載せられないのでその点はご理解ください。
流れ
- nuxtでプロジェクトを作成しgenerateすることで静的サイトへ
- golangとechoでできた既存システムでgenerateした静的サイトをホスティング
- リリース方法を検討していい感じにリリースできるようにする。
nuxtでプロジェクトを作成しgenerateすることで静的サイトへ
- ソースを載せられないのでいい感じにご自身で実装してください。
静的サイトへgenerate
- なんのこっちゃない。あまりやったことないがとりあえずlocalで
yarn generate
- generate?めんどくさいので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")
これだけで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。
非常にむりやりではありますが、今回はこのようにしましたとさ。