web開発初心者がlocalhost環境から外部にサイトを公開するまでに躓いたこと[Vue.js+nginx]

#最初に
frontendはvue
backendはfastapi
serverはnginxを使いました。
一応自分と同じくらいの知識量の人を対象にして書くのでわかってる人にはくどく感じるかも。
web開発は初めてで間違っている部分もあるかと思うので、
間違いあればぜひご指摘ください。

#まずやったこと
vueのプロジェクトをnpm run buildした。
これでbuild結果としてdistディレクトリが生成される
/var/www/htmlをnginxのルート(https://ewords.jp/w/%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88%E3%83%AB%E3%83%BC%E3%83%88.html)としたので
distディレクトリ内部を/var/www/htmlにコピーして
systemctl start nginx
でnginxを起動した。

以下遭遇した問題

#そもそもグローバルＩＰ先が応答しない
最初自分のコンピュータそのものをwebサーバーにしようとしたしたときに発生した。
これはおそらく自身が契約しているルーターの設定周りの問題。
おとなしくGCP,AWSといったクラウドサービスでインスタンス立てるか、レンタルサーバーを借りよう。以下GCEでインスタンス立てて話を進めることにする。
なおGCEに開発環境を持っていくのはgitを使えばよい。
あと、注意点としてdocker環境で構築している場合にも外部にはつながらなくて、
繋がるようにするには特殊な設定が必要みたいです。

#CSOR問題
これはlocalhostでも同様にある問題だけど一応のせとく。
ログインやデータベース周りはfirebaseを使っていたので問題なかったが、
stripeのapiを使おうとしてCSORにぶち当たった。
回避策としてfirebaseのcloud functionとか使ったりもしたが、
そもそもCSORでcloud functionが呼び出せない。
結論としては素直にbackendで書こう。
vueはfrontend。
vueはfrontend。
大事なことなので2度言います(主に自分に向けて)。
frontendで外部のサイトにアクセスするのは基本NGです。
firebase使えばbackendは要らないという幻想にとらわれていたせいで、
だいぶ時間を無駄にしました。
fastapiとかちょっとpython触ったことあるならめちゃ簡単にかける。
あまりbackendに難しいイメージを持たなくていいです。
実際の連携としては
nginxにプロキシ設定を書きます。これについては後ほど。

#リロードすると404 not found
これは実際にはroot以下に対応するフォルダ、ファイルがないから起きる。
ちゃんとvueを経由して問い合わせてあげないといけない。
そのために.htaccessファイルが必要です。
https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations
上記に.htaccessファイルの書き方あります。
そこで行き意気揚々とvueのpublicディレクトリに追加してbuildしたんですが、
無常なるかな404 not found が自分をあざ笑うかのように再び表示されるだけであった。
ここでnginxの罠１です。
nginxは.htacesssファイルが使えない！
解決策の一つとしては.htaccssの内容をnginx用に変換してくれるコンバータを使うことです。
https://winginx.com/ja/htaccess

変換された内容を
nginxのsites-available以下に追記すれば、上手く働きました。

#プロキシがうまくいかない
nginxの罠2
localhostでは上手くいっていた
vueのvue.congfig.jsに書いたproxy設定が
公海サーバーでは機能しなかった。
ちなみにvue.config.jsのproxy設定はこちら。
fastapiは標準でhttp://127.0.0.1:8000
がAPIのURLになるので

vue.config.js

 devServer: {
'^/api': {
                target: "http://127.0.0.1:8000",
                changeOrigin: true,
            }
}

としました。
この問題の解決策は
プロキシ設定をnginxにかいてやること。
自身の場合fastapiを使っていたので

location /api {
        proxy_pass http://127.0.0.1:8000;
    }

のように追記した。

#まとめ
web開発もサーバー通信も初めてだったのに、まあいけるやろってのりで公式ドキュメントをろくによまず進めていったのがぬまった原因だなと思う。急がば回れだね。
まあ、この失敗の経験が誰かの役に立てば幸いです。