次はpokedex.JSとDockerでそれを提供

こんにちは、驚くべき人々👋
私は最近、次のpokedexを作成する驚くべき記事を発見した.ありがとうございますdaily.dev
そのため、私はそれを自分で試してみました.ここではarticle .
しかし、それを展開するために、私は試みて、Dockerを使いたかったです.
したがって、この記事では、我々はNGinxとDockerイメージを構築し、それを使用して我々の次のアプリを提供します.

デモ:

ここでは、Dockerコンテナとしてクローンと実行できるpokedex repoがあります.

// clone the project
git clone https://github.com/rishabkumar7/next-pokedex.git

// install dependencies and start
npm install

// build the Docker image
docker build -t nextpokedex .

// run the app
docker run -d --name nextpokedex -p 80:80 nextpokedex

Nginxとは

NGinxは、Webサービスのためのオープンソースソフトウェア、逆プロキシ、キャッシュ、負荷分散、メディアのストリーミング、および詳細です.nginxプロセスは、1つのマスタープロセスといくつかの労働者プロセスに分けられます.マスタープロセスは、構成を評価し、ワーカープロセスを維持し、実際の要求を処理する.ディレクトリ内に配置される設定ファイルのワープロプロセスの数を定義することができます/usr/local/etc/nginx , /etc/nginx or /usr/local/nginx/conf .
構成ファイルは、モジュールまたはコンテキストを構成するディレクティブから成ります.シンプルなディレクティブとブロックディレクティブの2種類があります.単純なディレクティブは名前とパラメータをスペースで区切っており、このようにセミコロンで終了します.ブロックディレクティブは同じですが、追加情報があり、このようなブレースで囲まれています{ listen 80; root /usr/share/nginx/html; } .

worker_processes 4;

events { worker_connections 1024; }

http {
    server {
        listen 80;
        root  /usr/share/nginx/html;
        include /etc/nginx/mime.types;

        location /appui {
            try_files $uri /index.html;
        }
    }
}

Dockerの実装

私たちはマルチステージビルドを使用して、Dockerイメージを構築します.プロジェクトのDockerfileです.

# step 1 as builder
FROM node:10-alpine as builder

# copy the package.json to install dependencies
COPY package.json package-lock.json ./

# Install the dependencies and make the folder
RUN npm install && mkdir /next-pokedex && mv ./node_modules ./next-pokedex

WORKDIR /next-pokedex

COPY . .

# Build the project and copy the files
RUN npm run build


FROM nginx:alpine

#!/bin/sh

COPY ./.nginx/nginx.conf /etc/nginx/nginx.conf

## Remove default nginx index page
RUN rm -rf /usr/share/nginx/html/*

# Copy from the stahg 1
COPY --from=builder /next-pokedex/out /usr/share/nginx/html

EXPOSE 3000 80

ENTRYPOINT ["nginx", "-g", "daemon off;"]

ステップ1

stage 1とcopyパッケージのベースイメージとしてノード:10の山を使用しています.すべての依存関係をインストールするJSON.その後、残りのプロジェクトを後でコピーします.このようにして、ファイルの変更があるたびに、インストール依存性を飛ばすことができます.Dockerは、変更がない場合、既存の層から画像を構築するためにキャッシュを使用します.
Vue CLIを使用してプロジェクトを構築し、すべてのビルド済み静的ファイルを/outフォルダに配置します.

"scripts": {
   "dev": "next dev",
   "build": "next build && next export",
   "start": "next start"
}

ステップ2

ステップ2はベースイメージから始まるnginx:alpine をコピーし、nginx.conf ファイルをルートの位置からインデックスファイルを削除し、最後に、ステップ1からすべてのファイルをコピーし、ルートの場所にコピーします.

イメージをビルドし、プロジェクトを実行します

このコマンドでプロジェクトを構築しましょうdocker build -t nextpokedex .
このコマンドでプロジェクトを実行できますdocker run -d --name nextpokedex -p 80:80 nextpokedex .
あなたがアプリケーションを実行することができますhttp://localhost:80 .
Voila!

何か問題が発生した場合は、ご遠慮なくご遠慮下さい.
また、あなたが毎日チェックアウトしていない場合.あなたが私を使うならば、それは私がシャツを獲得するのを援助しますreferral link .