Zenn
⭐

Strapiを使ったAPIサーバーの構築方法

2024/06/30に公開
Node.js
API
Strapi
tech

Strapiは、Node.jsで実行できるオープンソースのHeadless CMSです。ここでは、Strapiを使ってAPIサーバーを構築する方法を説明します。

https://strapi.io/

1. プロジェクトを初期化する

create-straip-appを使って、プロジェクトテンプレートを作成します。

npx create-strapi-app@latest strapi-app

次に、以下の質問に答えます。

? Choose your installation type Custom (manual settings)
? Please log in or sign up. Skip
? Choose your preferred language TypeScript
? Choose your default database client postgres
? Database name: strapi
? Host: db
? Port: 5432
? Username: strapi
? Password: ******
? Enable SSL connection: No
  • Database name: docker-compose.ymlで設定するPOSTGRES_DBの値です。
  • Host: docker-compose.ymlで設定するデータベースのサービス名です。
  • Username: docker-compose.ymlで設定するPOSTGRES_USERの値です。
  • Password: docker-compose.ymlで設定するPOSTGRES_PASSWORDの値です。

2. docker-compose.ymlを作成する

次に、以下の内容でdocker-compose.ymlを作成します。

services:
  strapi:
    image: strapi:latest
    build:
      context: ./strapi-app
      dockerfile: Dockerfile-development
    env_file: 
      - ./strapi-app/.env
    environment:
      NODE_ENV: "development"
    volumes:
      - ./strapi-app/config:/opt/app/config
      - ./strapi-app/src:/opt/app/src
      - ./strapi-app/package.json:/opt/package.json
      - ./strapi-app/package-lock.json:/opt/package-lock.json
      - ./strapi-app/yarn.lock:/opt/yarn.lock
      - ./strapi-app/.env:/opt/app/.env
      - ./strapi-app/public/uploads:/opt/app/public/uploads
    ports:
      - "1337:1337"
    depends_on:
      - db
    networks:
      - strapi

  db:
    image: postgres:15
    ports:
      - 15432:5432
    volumes:
      - volume_db:/var/lib/postgresql/data
    environment:
      POSTGRES_DB: "strapi"
      POSTGRES_USER: "strapi"
      POSTGRES_PASSWORD: "strapi"
    networks:
      - strapi

volumes:
  volume_db:

networks:
  strapi:
    name: Strapi
    driver: bridge

次に、docker-composeを起動します。

% docker-compose up
[+] Running 2/2
 ✔ Container strapi-sample-db-1      Created                                                                                              0.0s 
 ✔ Container strapi-sample-strapi-1  Recreated                                                                                            0.1s

Project informationが表示されれば、起動成功です。

strapi-1  |  Project information
strapi-1  | 
strapi-1  | ┌────────────────────┬──────────────────────────────────────────────────┐
strapi-1  | │ Time               │ Sun Jun 30 2024 01:28:10 GMT+0000 (Coordinated … │
strapi-1  | │ Launched in        │ 1841 ms                                          │
strapi-1  | │ Environment        │ development                                      │
strapi-1  | │ Process PID        │ 80                                               │
strapi-1  | │ Version            │ 4.17.1 (node v18.19.1)                           │
strapi-1  | │ Edition            │ Community                                        │
strapi-1  | │ Database           │ postgres                                         │
strapi-1  | └────────────────────┴──────────────────────────────────────────────────┘
strapi-1  | 
strapi-1  |  Actions available
strapi-1  | 
strapi-1  | One more thing...
strapi-1  | Create your first administrator 💻 by going to the administration panel at:
strapi-1  | 
strapi-1  | ┌─────────────────────────────┐
strapi-1  | │ http://localhost:1337/admin │
strapi-1  | └─────────────────────────────┘
strapi-1  |

3. ブラウザからアクセスする

ブラウザで http://localhost:1337/admin にアクセスします。
（Windows + WSL2の場合は、1337ポートを転送してください）

必要な情報を入力して「Let's start」を押します。

これで、準備完了です。

4. Gitにpushする

Gitにコードをpushします。

create-straip-appのテンプレートに含まれる.gitの情報を削除します。

rm -rf strapi-app/.git

git pushします。

cd existing_folder
git init --initial-branch=main
git remote add origin git@gitlab.com:hoge/fuga.git
git add .
git commit -m "Initial commit"
git push --set-upstream origin main

Discussion