choblog

未分類

2025/04/11

2025/04/12

キャッチアップ画像

headless-wordpress (6) デプロイ

~ 目次 ~

    1 xserver-vps

    vpsの初期設定はこちら（xserver vps 初期設定）を参考にしてみてください。

    2 独自ドメイン取得

    まずムームードメインで独自ドメインを取得したら、コントロールパネル→ムームーDNS→ドメイン名の「変更」をクリック→「設定２へ進む」をクリック→種別をA、内容にvpsのipアドレスを入力→設定を追加するをクリックしてサブドメインにwpと入力、あとは同じく種別をA、内容にvpsのipアドレスを入力、これでドメイン、wordpress用のサブドメインの設定は完了です。

    3 Docker & Docker Compose インストール

    パッケージのインストール

    sudo apt update
sudo apt install -y ca-certificates curl gnupg lsb-release

    GPGキーの追加

    curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg

    リポジトリの追加

    set distro (lsb_release -cs)
echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu $distro stable" | \
  sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

    Docker インストール

    sudo apt update
sudo apt install -y docker-ce docker-ce-cli containerd.io

    確認

    docker -v
docker compose version
    sudo docker run hello-world
    sudo docker system prune -a

    sudo無しで使えるようにグループを追加

    sudo usermod -aG docker ユーザー名

    ログインし直して

    groups

    dockerが追加されていれば成功

    4 github ssh設定

    まずは~/.ssh内で秘密鍵の作成

    ssh-keygen -t ed25519 -f id_ed25519_github

    公開鍵を表示してコピー

    cat id_ed25519_github.pub

    github~Settings~SSH & GPGkeys~New SSH keyでペースト

    その後vps側でユーザー名〜登録

    git config --global user.name "ユーザー名"
git config --global user.email "Eメールアドレス"

    権限の設定

    chmod 600 ~/.ssh/id_ed25519_github

    ~/.ssh/configに

    Host github.com
        HostName github.com
        User git
        IdentityFile ~/.ssh/id_ed25519_github

    としてから

    ssh -T git@github.com

    Hi ユーザー名! You’ve successfully〜といった文言が出ればssh接続の設定は完了です。

    5 node npm yarn インストール

    n(node バージョンマネージャー)を入れるために一旦インストール

    sudo apt update
sudo apt install -y nodejs npm

    nをインストール

    sudo npm install -g n

    node.jsの安定版をインストール

    sudo n lts

    最初に入れたnode.jsとnpmを削除

    sudo apt remove -y nodejs npm

    確認

    node -v
npm -v

    npmを最新に更新

    sudo npm install -g npm

    yarn インストール

    sudo npm install -g yarn

    6 docker compose up

    まずは現在のプロジェクトディレクトリのツリー構造を確認

    headless-wordpress/
├── frontend-next/
├── backend-wp/
│   └── my-theme/
│       ├── index.php
│       ├── functions.php
│       └── style.css
└── docker/
    ├── development/
    │   ├── Dockerfile
    │   └── docker-compose.yml
    └── production/
        ├── Dockerfile
        └── docker-compose.yml

    production内のファイルを書いていきます

    production/Dockerfile

    FROM node:18-alpine

WORKDIR /app

COPY ../../frontend-next/package.json ../../frontend-next/yarn.lock ./

RUN yarn install --production

COPY ../../frontend-next/ .

EXPOSE 3000

    production/docker-compose.yml

    ---
services:
  https-portal:
    image: steveltn/https-portal:latest
    container_name: https-portal
    environment:
      WEBSOCKET: "true"
      DOMAINS: >
        choblog.org -> http://frontend-next:3000,
        wp.choblog.org -> http://backend-wp:80
      # STAGE: production
      STAGE: staging
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - https_portal_data_choblog:/var/lib/https-portal
    restart: always

  db:
    image: mariadb:latest
    container_name: db
    environment:
      MYSQL_ROOT_PASSWORD: ${WP_DB_ROOT_PW}
      MYSQL_DATABASE: ${WP_DB_NAME}
      MYSQL_USER: ${WP_DB_USER}
      MYSQL_PASSWORD: ${WP_DB_PASSWD}
    volumes:
      - db_data_choblog:/var/lib/mysql
    restart: always

  backend-wp:
    depends_on:
      - db
    image: wordpress:latest
    container_name: backend-wp
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_NAME: ${WP_DB_NAME}
      WORDPRESS_DB_USER: ${WP_DB_USER}
      WORDPRESS_DB_PASSWORD: ${WP_DB_PASSWD}
    ports:
      - "8080:80"
    volumes:
      - ../../backend-wp/my-theme:/var/www/html/wp-content/themes/my-theme
      - ../../backend-wp/php.ini:/usr/local/etc/php/php.ini
      - wordpress_data_choblog:/var/www/html
    restart: always

  frontend-next:
    container_name: frontend-next
    build:
      context: ../../
      dockerfile: docker/production/Dockerfile
    ports:
      - "3000:3000"
    volumes:
      - ../../frontend-next:/app
    command: sh -c "yarn build && yarn start"
    restart: always

volumes:
  https_portal_data_choblog:
  db_data_choblog:
  wordpress_data_choblog:

    https-portalのSTAGEは念の為stagingとしてます、デプロイしてみて問題なければproductionに変更、正式な証明書を発行します。

    productionのまま何度も証明書を再発行するようなことをしてしまうと最悪そのドメインが使用できなくなるようなので注意が必要です。

    そうしたらgithubにpush、vps側からclone, pullできるようにしておきます。

    準備が整ったらvpsに入ってプロジェクトのディレクトリをgithubからcloneしてきます。

    git clone git@github.com:~

    cloneできたらまずは必要な.envファイルを作成

    cd headless-wordpress/frontend-next
    vim .env

    フェッチのエンドポイントを設定

    NEXT_PUBLIC_WPGRAPHQL_ENDPOINT=http://backend-wp/graphql

    同じく

    cd ~/headless-wordpress/docker/production
    vim .env
    WP_DB_NAME=データベース名
WP_DB_USER=ユーザー名
WP_DB_PASSWD=パスワード
WP_DB_ROOT_PW=ルートパスワード

    設定が完了したらパッケージのインストール

    cd ~/headless-wordpress/frontend-next
    yarn install

    インストールが完了したらコンテナを立ち上げます

    cd ~/headless-wordpress/docker/production
    docker compose up -d

    確認

    docker ps -a

    立ち上がったらブラウザからhttps://wp.ドメイン名/wp-adminとして、まずはwordpressの初期設定

    その後ログを確認して

    docker logs frontend-next

    問題なければブラウザから

    https://ドメイン名

    うまく表示されれば成功、あとはdocker-compose.ymlファイルの

      https-portal:
    image: steveltn/https-portal:latest
    container_name: https-portal
    environment:
      WEBSOCKET: "true"
      DOMAINS: >
        ドメイン名 -> http://frontend-next:3000,
        wp.ドメイン名 -> http://backend-wp:80
      # STAGE: production
      STAGE: staging

    この部分のstagingをproductionに変えて再度compose upし直し

    問題なければこれでデプロイまでの流れが完成です、お疲れ様でした。

    広告

    広告

    広告

    広告

    広告

    広告