Zenn
🕌

プロキシ環境下でNext.jsのDocker開発環境を構築する（SWCバイナリ・CSS崩れ対応

2025/04/01に公開
Docker
Next.js
proxy
frontend
dev
tech

会社のプロキシ環境下で Next.js を Docker 上に構築しようとすると、以下のようなトラブルに見舞われることがあります：

  • Next.js 起動時に @next/swc-linux-x64-gnu のバイナリ取得エラー
  • Google Fonts や CSS の読み込みが失敗してデザインが崩れる
  • npm install 時の SSL エラーやタイムアウト
  • Docker のホスト環境と volume の衝突

この記事では、プロキシ環境における Next.js + Docker の開発環境の構築方法をまとめます。

🎯 ゴール

  • 社内プロキシ環境下でも Next.js を Docker 上で起動できる
  • @next/swc バイナリ問題を回避して正常に開発できる
  • CSS が適用される

📁 ディレクトリ構成

my-app/
├── scash-pilot2/
│   ├── Dockerfile
│   ├── package.json
│   ├── next.config.mjs
│   └── ...
├── docker-compose.yml

📦 Dockerfile

FROM node:20

WORKDIR /app

COPY package*.json ./
COPY certs ./certs

ARG HTTP_PROXY
ARG HTTPS_PROXY

ENV HTTP_PROXY=$HTTP_PROXY
ENV HTTPS_PROXY=$HTTPS_PROXY
ENV NEXT_DISABLE_SWC_BINARY=true
ENV NEXT_FONT_GOOGLE_DISABLE=true

RUN npm config set proxy $HTTP_PROXY && \
    npm config set https-proxy $HTTPS_PROXY && \
    npm config set strict-ssl false && \
    npm install -g npm@latest && \
    npm cache clean --force && \
    npm install

COPY . .

EXPOSE 3000
CMD ["/bin/sh", "-c", "echo NEXT_DISABLE_SWC_BINARY=$NEXT_DISABLE_SWC_BINARY && npm run dev"]

🐳 docker-compose.yml

services:
  scash-pilot2:
    build:
      context: ./scash-pilot2
      dockerfile: Dockerfile
      args:
        HTTP_PROXY: http://your-proxy-host:8080
        HTTPS_PROXY: http://your-proxy-host:8080
    container_name: scash-pilot2
    ports:
      - "3000:3000"
    volumes:
      - ./scash-pilot2:/app
    environment:
      - NODE_ENV=development
      - HTTP_PROXY=http://your-proxy-host:8080
      - HTTPS_PROXY=http://your-proxy-host:8080
      - NEXT_DISABLE_SWC_BINARY=true
      - NEXT_FONT_GOOGLE_DISABLE=true

※ your-proxy-host はご自身のプロキシアドレスに書き換えてください。

🧠 .env.development （必要に応じて）

HTTP_PROXY=http://your-proxy-host:8080
HTTPS_PROXY=http://your-proxy-host:8080
NEXT_DISABLE_SWC_BINARY=true
NEXT_FONT_GOOGLE_DISABLE=true

🛠 next.config.mjs

/** @type {import('next').NextConfig} */
const config = {
  output: 'standalone',
  eslint: {
    ignoreDuringBuilds: true,
  },
  typescript: {
    ignoreBuildErrors: true,
  }
};

export default config;

✅ 起動コマンド

docker-compose down -v
docker-compose build --no-cache
docker-compose up

ブラウザで http://localhost:3000 にアクセスします。

⚠ よくある問題と対処法

1. @next/swc-linux-x64-gnu が見つからない

→ NEXT_DISABLE_SWC_BINARY=true を使うことで SWC バイナリのダウンロードを抑制し、JavaScript 実装にフォールバックできます。

2. CSS が適用されない

Google Fonts 経由のフォントがブロックされている可能性があります。
NEXT_FONT_GOOGLE_DISABLE=true で無効化し、ローカルフォント or fallback を使いましょう。

3. @emotion/react が見つからない

@mui/material を使っている場合、明示的に emotion 関連をインストールしておきましょう：

npm install @emotion/react @emotion/styled

🧪 補足：キャッシュ削除

docker exec -it scash-pilot2 sh
rm -rf .next
exit
docker-compose restart

📚 まとめ

項目 解決策
SWC バイナリエラー NEXT_DISABLE_SWC_BINARY=true
Google Fonts の fetch エラー NEXT_FONT_GOOGLE_DISABLE=true
npm install のプロキシ失敗 npm config set proxy / ENV HTTP_PROXY=...
CSS 崩れ 上記設定とキャッシュ削除
MUI のエラー @emotion/react を手動インストール

Next.js の開発環境構築が難航するのは「プロキシ」「バイナリ」「フォント」の3点が大きな壁です。
ぜひ、この記事をベースに構築テンプレートとしてご活用ください！

🔗 関連リンク

Discussion

ログインするとコメントできます