Nuxtで作ったウェブアプリケーションを、Kubernetes上で動かしたいと考えています。
その際、配置先をexample.com
ではなくexample.com/app
にしたいです。
色々と試しては見たのですがうまくいかず、お知恵をお借りできればと思い質問させて頂きました。
以下に設定ややってみた事を挙げますが、必要な情報が不足している等ありましたらご指摘頂けると幸いです。
宜しくお願い致します。
Ingressの設定
他にも色々とサービスが動いているのですが、該当する個所を抜粋します。
apiVersion: extensions/v1beta1 kind: Ingress #... 略 ... spec: rules: - host: "example.com" http: paths: - path: /app backend: serviceName: app servicePort: 8000 #... 略 ...
試してみた事
質問に至るまでにいくつか試した事があるので、列挙します。
そのままデプロイ
ひとまず何もせずにデプロイを試してみました。
デプロイされたコンテナの中では、最終的にyarn start
が走っており、ポートは8000
で待ち受けています。
module.exports = { mode: 'spa', srcDir: 'src/', server: { port: 8000, }, //... 略 ... router: { base: '/' }, //... 略 ... }
結果
example.com/appにアクセスできるが、リンク切れを起こしてしまう
ローディング画面は出るのですが、js等のリンクがexample.com/_nuxt/~~
を参照するようになっており、まったく動作しません。
Nuxtの設定でbaseURLを変更
公式リファレンスにドンピシャな設定があったので、こちらを参考に設定してみました。
https://ja.nuxtjs.org/api/configuration-router/
module.exports = { mode: 'spa', srcDir: 'src/', server: { port: 8000, }, //... 略 ... router: { base: '/app/' }, //... 略 ... }
結果
example.com/app/appになってしまい、やはりリンク切れを起こす
今度はexample.com/app
では接続できず("Cannot GET /"と言われる)、example.com/app/app
にアクセスするとローディング画面が表示されます。
そして、やはりというかリンクはexample.com/app/_nuxt/~~
を参照するようになっており、そのルートは無いので読み込めず、まったく動作しません。
SSRをあきらめてgenerate
SSRにするからいけないのか?と思い、いろいろ諦めてgenerateを試してみました。
この際、router.base
はapp
に設定して、npm generate
で静的ファイルを書き出します。
作成されたgenerateフォルダの中は以下の構成になっています。
generate |- app |- file |- file |- ...
今までのコンテナでは動かないので、nginxのコンテナを使って、生成されたファイルのうちapp以下のデータをコンテナにコピーして使います。
appフォルダをフォルダごとコピーしてしまうとIngressを通過してきたときにexample.com/app/app
になってしまうけど、app以下のフォルダをコピーしたらexample.com/app
になってくれるのではと考えました。
結果
表示はされるが、ブラウザリロード時にサブディレクトリを無視したページに飛んでしまう
今までで一番正しく表示はされており、基本的にリンク切れも無いのですが、example.com/app
上でctrl+R
等でリロードすると、example.com
に飛んでしまいます。そしてそこには何もないので、エラーになってしまいます。
あなたの回答
tips
プレビュー