DjangoとViteの設定を変更して新しいドメインでアクセスできるようにしたときのメモ

前回Route53で新しいドメインを取得しました。
今回は新しいドメインをWebアプリケーションにアクセスできるようにしました。
まずAPIサーバーなどに接続するためにDjangoのsettings.pyファイルのALLOWED_HOSTSに記述を加えました。
ALLOWED_HOSTSには追加したいドメイン名のみを記述しました。プロトコルやポート番号を記述してしまうとエラーが出てしまいます。

ALLOWED_HOSTS = [
    '127.0.0.1',
    '[サブドメイン名].[ドメイン名].com',
]

ALLOWED_HOSTSに対してCORS_ALLOWED_ORIGINSにはプロトコル、ドメイン名、ポート番号を記述しました。

CORS_ALLOWED_ORIGINS = [
    'http://127.0.0.1:5173',
    'http://[サブドメイン名].[ドメイン名].com:5173',
]

次にvite.config.jsファイルのdefineConfig関数に定義してある、serverプロパティにcors: trueと記述しました。
これによって先程DjangoのCORS_ALLOWED_ORIGINSで許可したoriginを使えるようになりました。

export default defineConfig({
  plugins: [react()],
  server: {
    host: true,
    port: 5173,
    watch: {
      usePolling: true,
    },
	  cors: true,
}
})

最後にデータベースをマイグレーションしてから再度Dockerを立ち上げると新しく取得したドメインでWebアプリケーションを立ち上げることが出来ました。

以上でReactとDjango環境における新しいドメインの有効化が完了しました。