konchangakita

KPSを一番楽しんでいたブログ 会社の看板を背負いません　転載はご自由にどうぞ

【Nutanix ログほいほい】フロントエンドのベースコンテナ作る

Nutanix ログほいほい

今回から Github でコードを公開していきます

Githubリポジトリ

このブログ用リポジトリはここに公開していきます
https://github.com/konchangakita/blog-loghoi.git

開発用サーバで、git cloneすると良いです

% git clone https://github.com/konchangakita/blog-loghoi.git
Cloning into 'blog-loghoi'...
remote: Enumerating objects: 4, done.
remote: Counting objects: 100% (4/4), done.
remote: Compressing objects: 100% (3/3), done.
remote: Total 4 (delta 0), reused 0 (delta 0), pack-reused 0
Receiving objects: 100% (4/4), done.


コンテナの構造

全体像はこんな感じで、今回はフロントエンドのベースとなるコンテナを作ります

フロントエンドコンテナのベース

フロントエンドは Next.js をベースに作っていきます
Next.js のコンテナ化について下記にも記載があったのですが
next.js/examples/with-docker at canary · vercel/next.js · GitHub

最終的に完成したコンテナに使うのはよさそうですが、初心者がガリガリ検証しながら使う感じではなさそう、、、
ということで、dockerhub の nodeイメージをベースにイチから作ってゆきます

コンテナ作成

はじめは空っぽのコンテナを作って、

FROM node:20-slim 

WORKDIR /usr/src/

CMD ["tail", "-f", "/dev/null"]


Next.jsのインストール

まずはコンテナを起動して、Next.jsのインストールを行います

# npx create-next-app@latest
|<

今では標準で <strong class="st">Type Script</strong> が選択できようになっているようですね
オプションはデフォルトのままインストール
[f:id:konchangakita:20230814013118p:plain]

インストールしたフォルダに移動して、とりあえず実行してみます
>|sh|
# npm run dev


一発目の起動ではなんだかこんなエラーが出ましたが、、、しばらくしたらなんだかちょっと待ったらいけました

- error Error [SyntaxError]: Unexpected end of JSON input
    at JSON.parse (<anonymous>)
    at loadManifest (/usr/src/next-app/loghoi/node_modules/next/dist/server/load-manifest.js:30:27)
    at DevServer.getNextFontManifest (/usr/src/next-app/loghoi/node_modules/next/dist/server/next-server.js:469:47)
    at DevServer.findPageComponents (/usr/src/next-app/loghoi/node_modules/next/dist/server/dev/next-dev-server.js:557:43)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async DevServer.renderPageComponent (/usr/src/next-app/loghoi/node_modules/next/dist/server/base-server.js:1430:24)
    at async DevServer.renderToResponseImpl (/usr/src/next-app/loghoi/node_modules/next/dist/server/base-server.js:1486:32)
    at async DevServer.pipeImpl (/usr/src/next-app/loghoi/node_modules/next/dist/server/base-server.js:727:25)
    at async DevServer.handleCatchallRenderRequest (/usr/src/next-app/loghoi/node_modules/next/dist/server/next-server.js:698:13)
    at async DevServer.handleRequestImpl (/usr/src/next-app/loghoi/node_modules/next/dist/server/base-server.js:639:17) {
  digest: undefined
}


最終的に compiled successfully とか出たらとりあえずOK

- ready started server on 0.0.0.0:7777, url: http://localhost:7777
- event compiled client and server successfully in 206 ms (20 modules)
- wait compiling...
- event compiled client and server successfully in 177 ms (20 modules)
- wait compiling /page (client and server)...
- event compiled client and server successfully in 1924 ms (415 modules)
- wait compiling...
- event compiled successfully in 260 ms (235 modules)
- wait compiling /favicon.ico/route (client and server)...
- event compiled successfully in 154 ms (249 modules)


ブラウザから接続するポートを変えたい場合は、package.jsonの "dev": "next dev" の行をいじります

  "scripts": {
    "dev": "next dev -p 7777",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },


とりあえずブラウザからアクセスして、これが出てこればあっている


その他機能のインストール

あとは DaisyUI、Fontawesomeなど、過去の自分のブログを参考にしながら、インストールしていきます
konchangakita.hatenablog.com

コードフォーマッターも使ってみる

Prettier というコードフォーマッターも利用してみようと思います
全部では無いですが、この辺を参考にしてみました
【2022年】Next.js + TypeScript + ESLint + Prettier の構成でサクッと環境構築する


VScode側でも拡張機能をいれたり設定もする必要がありますが、初心者的にはコードがキレイになりそうなので、よさそう

色々インストールしていくと、package.jsonファイルが育っていきます
node関連は package.json があれば良いので、育ったpackage.json がある状態で dockerfile上でyarnするだけでよいのです

docker-compose で起動

最終的には Kubernetes化したいですが、開発中は何かとdocker-composeでローカルファイルシステムをマウントしてリアルタイムで直接いじれるようにしておいた方が何かと便利です

Dockerfile側は、これだけです
（開発が終わればコメントアウトをはずす予定）

FROM node:20-slim 

#WORKDIR /usr/src/
#COPY ./next-app .
#RUN yarn
#RUN npm build
#CMD ["npm", "start"]


docker-compose側でローカルファイルシステムをマウントしてやることで、リアルタイムにファイルを編集しつつ確認するのが楽なので、開発中はこのカタチをとります
（きっとCI/CD組めば、ファイルの書き換えしたらコンテナイメージ自動的に更新とかできるんだろうな）

version: "3.8"
services:
  frontend:
    build:
      context: ./frontend
      dockerfile: dockerfile
    container_name: loghoi-frontend
    ports:
      - 7777:7777
    volumes:
      - ./frontend/next-app:/usr/src/next-app:z
    command:
      bash -c "cd /usr/src/next-app/loghoi
      && yarn
      && tail -f /dev/null"
    working_dir: /usr/src/next-app/loghoi
    networks:
      - local

networks:
  local:
    driver: bridge

今日の成果物

長々と書いてきましたが、最終的には github からダウンロードした docker-compose.ymlを使うだけでOKです

blog/0814 配下で
docker-composeで起動し

# docker-compose -f "docker-compose.yml" up -d --build

コンテナに入って

# docker exec -it loghoi-frontend bash

/usr/src/next-app/loghoi配下で Next.js Webサーバ起動

# npm run dev

ブラウザで開発サーバの IPアドレス:7777にアクセス！


次回は

なにげにフロントエンドコンテナをイチから作り直したりしていると、何が最適なのかよくわからなくなってきたりして。。。
バックエンドもやりたかったけど、タイムアップでちょっと悩みながら次回はバックエンドコンテナのベースを作ります