Directus CMS + Docker

WEB Design
12

DevモードからProductionモードへの移行

agency-os/.env

コンテナのローカルIPアドレスからドメインへ変更

変更前

DIRECTUS_URL="http://172.xx.xx.1:8055"
DIRECTUS_SERVER_TOKEN="cE4_7r4JaphkuYDhnSjnXZE9-kAGlbNI"
NUXT_PUBLIC_SITE_URL="http://172.xx.xx.1:3000"

変更後

DIRECTUS_URL="https://api_test.example.com"
DIRECTUS_SERVER_TOKEN="xxxxxxxxxxxxxxxxxxxxxx"
NUXT_PUBLIC_SITE_URL="https://test.example.com"

agency-os/nuxt.config.ts

環境変数で指定されているので http://localhost:3000 はそのままで可。

siteUrl: process.env.NUXT_PUBLIC_SITE_URL || 'http://localhost:3000',

データベースの操作

ローカル環境で作成したコンテンツの画像リンク先を修正。

ビルド

コンテナ内でビルド

$ docker compose exec agency-os bash
# pnpm build

pnpm dev から pnpm start へ変更

コンテナ内でビルドコマンドを実行（コードを編集した場合やコンテンツを追加した場合にも実行）。

# pnpm build

上記ビルドコマンドを実行し./outputフォルダが作成されたらnodeコマンドで起動。

docker-compose.yaml

#   entrypoint: ["/bin/bash"] # Initial entry point. need to execute "pnpm i" then "pnpm build" or start debug mode "pnpm dev"
    entrypoint: ["node", ".output/server/index.mjs"] # after "pnpm build" for running static pages

環境変数は以下参照。必要に応じてdocker-compose.yamlのenvironmentセクション、または.envファイルに記載。

上記スクリプトコマンドは以下参照。

agency-os/package.json

{
	"private": true,
	"scripts": {
		"build": "nuxt build",
		"dev": "nuxt dev",
		"start": "nuxt start",
		"generate": "nuxt generate",
		"preview": "nuxt preview",
		"postinstall": "nuxt prepare",
		"typecheck": "nuxt typecheck",
		"lint": "eslint --cache .",
		"format": "prettier --write \"**/*.{md,y?(a)ml,json,vue}\""
	},

コンテナ内でドメイン名を解決するため、directusとagency-os各サービスに以下のセクションを追加。

ただし、directusのセクションのみ
PUBLIC_URL: 'http://api_test.ficusonline.com'
を追加

docker-compose.yaml

### directus,agency-osセクションに追加（Dev・Productionモードで共に指定可）
extra_hosts:
      - "api.example.com:172.22.0.1"
      - "www.example.com:172.22.0.1"

### directusセクションのみ追加（Devモードではコメントアウト）
environment:
  PUBLIC_URL: 'https://api_test.example.com'