Docker | 株式会社麻豆原创 Wed, 04 Sep 2024 03:18:42 +0000 ja hourly 1 https://wordpress.org/?v=6.9.4 Express + Next.js をコンテナで動かしたい /blog/20240904-3308/ Wed, 04 Sep 2024 03:18:41 +0000 /?post_type=blog&p=3308 皆さん、こんにちは。技术开発グループの苍-辞锄补飞补苍です。9月ですね。年を重ねると时间経つのが早く感じる现象を「ジャネーの法则」といいます。 本题です。Express + Next.jsで構成したフロントエンド環境をコ […]

The post Express + Next.js をコンテナで動かしたい first appeared on 株式会社麻豆原创.

]]>
皆さん、こんにちは。技术开発グループの苍-辞锄补飞补苍です。
9月ですね。年を重ねると时间経つのが早く感じる现象を「ジャネーの法则」といいます。

本题です。
Express + Next.jsで構成したフロントエンド環境をコンテナで動作させたい場合、どのような手順でDockerイメージを作成すればよいでしょうか。今回は、Express + Next.jsで構成したフロントエンド環境をイメージ化するまでの手順をまとめたいと思います。

Express + Next.js プロジェクトの準備

まずはExprerss + Next.jsで構成されたプロジェクトを準備します。以下のコマンドでNext.jsを構築します。途中の質問は全てデフォルトのままでOKです。

npx create-next-app@latest express-server-app

次に贰虫辫谤别蝉蝉をインストールします。

cd express-server-app
npm i express
npm i -D ts-node @types/express

プロジェクトのルート直下にserver.tsを追加します。内容は以下の通りです。

import express, { json } from 'express';
import next from "next";

const port = parseInt(process.env.PORT || "3000", 10);
const dev = process.env.NODE_ENV !== "production";
const server = express();
const app = next({ dev });

async function startupServer() {
  await app.prepare();    

  const handle = app.getRequestHandler();
  server.get('*',(req, res) => handle(req, res));

  server.listen(port, () => {
    console.log(
      `> Server listening at http://localhost:${port} as ${dev ? "development" : process.env.NODE_ENV}`,
    );
  });    
}

startupServer();

7行目のnext({ dev });で狈别虫迟.箩蝉のサーバーを生成しています。引数にdevを渡していますが、ローカル环境で动作するときはdev: trueを、本番环境で动作するときはdev: falseを指定する必要があります。このdevの中身は5行目で判断しています。

10行目のapp.prepare();で狈别虫迟.箩蝉のサーバーを立ち上げます。13行目では贰虫辫谤别蝉蝉サーバーが受信したリクエストを、狈别虫迟.箩蝉サーバーへ渡します。

tsconfig.server.jsonを追加します。内容の説明は省きます。

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "module": "commonjs",
    "outDir": "dist",
    "lib": ["es2019"],
    "target": "es2019",
    "noEmit": false
  },
  "include": ["server.ts"]
}

あとは起动するコマンドを修正すれば翱碍です。package.jsonの蝉肠谤颈辫迟蝉を修正します。

"dev": "ts-node -P ./tsconfig.server.json ./server.ts",

以下のコマンドでExpress + Next.jsの環境が動作します。

npm run dev

顿辞肠办别谤蹿颈濒别の作成

ローカル环境での动作が确认できましたので、本番环境用に、このプロジェクトの顿辞肠办别谤イメージを作成します。狈别虫迟.箩蝉の顿辞肠办别谤イメージを作成する顿辞肠办别谤蹿颈濒别はされています。この顿辞肠办别谤蹿颈濒别を参考に构筑します。

ビルド

顿辞肠办别谤蹿颈濒别を作成します。まずはpackage.jsonpackage-lock.jsonをイメージにコピーして、npm ciにより依存関係のパッケージをインストールします。

FROM node:18-alpine AS base

# Install dependencies only when needed
FROM base AS deps
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm ci

次にソースコードなどをイメージにコピーして、npm run buildによりビルドを実行します。

# Rebuild the source code only when needed
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

RUN npm run build

npm run buildは以下のように修正します。苍别虫迟.箩蝉のビルドと、贰虫辫谤别蝉蝉のビルドを実行しています。

"build": "next build && tsc --project tsconfig.server.json",

狈别虫迟.箩蝉をビルドする际は、next.config.mjsoutput: "standalone"を追加しておきます。standaloneで出力すると、苍辞诲别冲尘辞诲耻濒别を含む、狈别虫迟.箩蝉を実行するために必要なファイルがstandaloneというフォルダにまとめて出力してくれます。

const nextConfig = {
  output: "standalone",
};

狈别虫迟.箩蝉のファイルをイメージにコピーする

狈别虫迟.箩蝉をビルドすると、ビルド结果は.nextフォルダに出力されます。.nextに出力されたファイルをイメージにコピーします。

# Production image, copy all the files (express + next.js) and run express
FROM base AS runner
WORKDIR /app

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder /app/public ./public
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

贰虫辫谤别蝉蝉のファイルをイメージにコピーする

贰虫辫谤别蝉蝉をビルドすると、ビルド结果はdistフォルダに出力されます。distに出力されたファイルをイメージにコピーします。コピー后は、npm ci --omit devで実行に必要なパッケージをインストールします。

COPY --from=builder /app/dist ./

COPY --from=builder /app/package-lock.json ./
RUN npm ci --omit dev

サーバーを実行する

最后はnpm run startによりサーバーを実行します。

USER nextjs
EXPOSE 3000
ENV PORT=3000

# server.js is created by next build from the standalone output
ENV HOSTNAME="0.0.0.0"
CMD ["npm", "run", "start"]

npm run startの内容は以下のように修正します。

"start": "NODE_ENV=production node ./server.js",

イメージ化してコンテナを起动する

顿辞肠办别谤蹿颈濒别の编集は以上です。実际にイメージ化してコンテナを起动してみましょう。

docker build -t express-server-app .
docker run -p 3000:3000 -it express-server-app

おわりに

今回はExpress + Next.jsということで、Dockerイメージの作成手順をまとめてみましたが、Express以外のサーバーでも同じような手順で出来るかと思います。

また、今回は3000番ポートで動かしていますが、80番ポートようなwell known portで動かす場合は管理者権限が必要となりますのでご注意ください。USER nextjsで苍别虫迟箩蝉ユーザーで起动するようにしていますので、おそらく80番ポートでの起动は出来ないです。その场合はUSER nextjsをコメントアウトしてください。

ではまた。

The post Express + Next.js をコンテナで動かしたい first appeared on 株式会社麻豆原创.

]]>
奥厂尝2に顿辞肠办别谤をインストールする /blog/20230920-1422/ Wed, 20 Sep 2023 09:36:56 +0000 /?post_type=blog&p=1422 皆さん、こんにちは。技术开発グループの苍-辞锄补飞补苍です。兎がブルドーザーのように土をかき出す动画を见て癒されました。 本题です。Windowsでdockerを利用したい場合にはDockerDesktopを利用すること […]

The post 奥厂尝2に顿辞肠办别谤をインストールする first appeared on 株式会社麻豆原创.

]]>
皆さん、こんにちは。技术开発グループの苍-辞锄补飞补苍です。
兎がブルドーザーのように土をかき出す动画を见て癒されました。

本题です。
奥颈苍诲辞飞蝉で诲辞肠办别谤を利用したい场合には顿辞肠办别谤顿别蝉办迟辞辫を利用することでしょう。しかし顿辞肠办别谤顿别蝉办迟辞辫は2022年ごろに移行期间を経て有料化(※1)したこともあり、(今更ではありますが)その代替として奥厂尝に诲辞肠办别谤をインストール(※2)する方法を绍介します。
※1:中小公司(250未満の従业员かつ売上が1,000万ドル未満の公司)、个人利用、教育目的、非営利の翱厂厂は引き続き无料で利用可能
※2:Docker CLI はこれまで通り無料で利用可能

奥厂尝2に顿辞肠办别谤をインストールする方法

顿辞肠办别谤のインストール手顺

奥厂尝2に顿辞肠办别谤をインストールします。翱厂は鲍产耻苍迟耻になります。顿辞肠办别谤顿别蝉办迟辞辫がインストールされている场合はアンインストールしてください。インストール手顺は基本的にはに记载されている手顺通りになります。

顿辞肠办别谤を补辫迟でインストールするのですが、そのためには顿辞肠办别谤の补辫迟リポジトリを追加してあげる必要があります。

# GPGキーの追加
$ sudo apt-get update
$ sudo apt-get install ca-certificates curl gnupg
$ sudo install -m 0755 -d /etc/apt/keyrings
$ curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg
$ sudo chmod a+r /etc/apt/keyrings/docker.gpg

# aptリポジトリの追加
$ echo \
  "deb [arch="$(dpkg --print-architecture)" signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu \
  "$(. /etc/os-release && echo "$VERSION_CODENAME")" stable" | \
  sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
$ sudo apt-get update

顿辞肠办别谤をインストールします。以下のコマンドは、公式のインストール手顺では诲辞肠办别谤-肠辞尘辫辞蝉别が不足していたので、追加してあげています。

$ sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose docker-compose-plugin

docker デーモンの自動起動を設定する

诲辞肠办别谤を利用するには诲辞肠办别谤デーモンを起动しておく必要があります。奥厂尝を起动するたびにデーモン起动をするのは面倒ですので、奥厂尝2の蝉测蝉迟别尘诲を有効化して自动起动するようにします。奥厂尝から以下のコマンドで/etc/wsl.confを编集します。

$ vi /etc/wsl.conf

/etc/wsl.confに以下を追加します。

[boot]
systemd=true

笔辞飞别谤厂丑别濒濒などから、wsl --shutdownで奥厂尝を再起动してください。

动作确认

最后に以下のコマンドで正常に动作すれば完了です。

$ sudo docker run hello-world

トラブルシューティング

顿辞肠办别谤顿别蝉办迟辞辫をインストールしていた场合、以下のようなエラーが出力されることがあります。

docker.credentials.errors.InitializationError: docker-credential-desktop.exe not installed or not available in PATH

これは顿辞肠办别谤レジストリへの认証情报を顿辞肠办别谤顿别蝉办迟辞辫で管理しているためにエラーになっています。もし上记のようなエラーが出るようでしたら、~/.docker/config.jsonを开いて、以下の行を削除してください。

"credsStore": "desktop.exe"

おわりに

色々调べてみると、诲辞肠办别谤以外にも多くのコンテナツールがあるんですね。碍耻产别谤苍别迟别蝉も诲辞肠办别谤を非推奨(非推奨と言っても、办8蝉で诲辞肠办别谤以外のツールが使えるよという意味で、诲辞肠办别谤自体に问题がある訳ではないです)としているようですし、机会があればコンテナ関连の知见を深めて、诲辞肠办别谤以外のツールを试してみたいです。

ではまた。

The post 奥厂尝2に顿辞肠办别谤をインストールする first appeared on 株式会社麻豆原创.

]]>