FullStackOpen Part3-b Deploying app to internet メモ

Same origin policy and CORS

URLのオリジンは以下の組み合わせで決められる
・プロトコル(HTTPなど)
・ホスト名
・ポート

同オリジンでのURLのアクセスは特に問題ないが、別オリジンの場合はAccess-Control-Allow-Originをチェックする必要がある。
どのオリジンを許可しているかはレスポンスヘッダのAccess-Contol-Allow-Originに*または対象のオリジンが含まれているか確認する

オリジン間の接続を制御するためにCORS(Cross Origin Resource Sharing)が導入されている

バックエンド側でnpm install corsでインストールし、以下のコマンドでミドルウェアとして使う

const cors = require('cors')
app.use(cors())

こんな感じで許可されたオリジンがでる。今は*となっているためすべて受け付ける

Application to the Internet

Fly.ioの無料枠がある
fly auth loginでコマンドからログインし、fly lauch

適切に入力するとfly.tomlファイルがプロジェクトのルートに作成される

fly deployでデプロイ 

以下のエラーが出た
Error: failed to fetch an image or build from source: error building: error during connect: Post

理由はVPNだったので、VPNを切って再実行したところうまくいった。

Frontend Production build

"npm run build"でプロダクション用のビルドを作成
buildフォルダが作られ、static中にjsファイルなどが置かれる

Serving static files from the backend

もっとも簡単なフロントエンドのデプロイ方法はバックエンドのルートディレクトリに上記で作成したbuildフォルダをコピペする方法

フォルダ構造はこんな感じ

staticを提供するためにミドルウェアを実装しておく
ページのルートにアクセスするとindex.htmlを返すようになる
app.use(express.static('build'))

The whole app to the internet

buildフォルダを含めるとなぜかfly deployがうまくいかなくなる…
こちらもネットワークを変更したところ何故かうまくいくようになった

Streamlining deploying of the frontend

{
  "scripts": {
    // ...
    "build:ui": "@powershell Remove-Item -Recurse -Force build && cd ../frontend && npm run build && @powershell Copy-Item build -Recurse ../backend",
    "deploy": "fly deploy",
    "deploy:full": "npm run build:ui && npm run deploy",    
    "logs:prod": "fly logs"
  }
}

以上のコマンドをpackage.jsonに登録

Proxy

フロントエンドとバックエンドが別ポートで動作している場合、FEからBEのHTTPリクエストがうまくいかなくなる(fly.ioで公開し、baseUrlをいじったため)
そのときはpackage.jsonにプロキシを加えることで、HTTPリクエストに失敗したときにリダイレクトされる

{
  "dependencies": {
    // ...
  },
  "scripts": {
    // ...
  },
  "proxy": "http://localhost:3001"
}