🥇VueJS + NodeJS + MongoDB アプリケーションを Docker でパッケージ化する方法

前回の記事からもわかるように、私はさまざまなプロジェクトに取り組みました。新しいチームでの最初の数日は、通常、同じように進みます。バックエンダーは私に寄り添い、アプリケーションをインストールしてデプロイするための魔法のようなアクションを実行します。 Docker はフロントエンド開発者にとって不可欠な理由です。バックエンドは多くの場合、幅広い PHP/Java/Python/C# スタックで記述されており、すべてをインストールしてデプロイするために毎回フロントがバックエンドの注意をそらす必要はありません。 Docker と Jenkins の組み合わせと透過的なデプロイ、ログ、自動テストが見られたのは XNUMX か所だけでした。

Docker については、詳細な記事がたくさん書かれています。この記事では、VueJS/Vue Router を使用したシングルページアプリケーションのデプロイについて説明します。サーバー部分は NodeJS を使用した RESTful API の形式で、データベースとして MongoDB が使用されます。 Docker Compose は、複数のコンテナアプリケーションを定義して実行するために使用されます。

なぜDockerが必要なのか

Docker を使用すると、アプリケーションのデプロイプロセスを自動化できます。開発者は、自分でプログラムをインストールしたり、マシン上のバージョンの非互換性に対処したりする必要がなくなりました。必要なのは、Docker をインストールし、コンソールに 1 ～ 2 つのコマンドを入力することだけです。これを行う最も便利な方法は Linux 上で行うことです。

始める

セットデッカー & Docker 構成

フォルダ構造

クライアントアプリケーションとサーバーアプリケーション用に 2 つのフォルダーを作成します。拡張子が .yml のファイルは構成ファイルです ドッカーの作成ここで、アプリケーションコンテナが定義され、関連付けられます。
Docker-compose.yml:

version: "3"
services:
  mongo:
    container_name: mongo
    hostname: mongo
    image: mongo
    ports:
      - "27017:27017"
  server:
    build: server/
    #command: node ./server.js #здесь можно перезаписать CMD из Dockerfile в /server
    ports:
      - "3000:3000"
    links:
      - mongo
  client:
    build: client/
    #command: http-server ./dist #здесь можно перезаписать CMD из Dockerfile в /client
    network_mode: host
    ports:
      - "8089:8089"
    depends_on:
      - server

Docker で 3 つのサービス (NodeJS、MongoDB 用、および Vue の静的サービス) を作成します。クライアントをサーバーに接続するために追加されました サーバーに依存します。 MongoDB をサーバー API にリンクするには、次を使用します。 リンクモンゴ。サーバー、クライアント、mongo - サービスの名前。

VueJSクライアント

フォルダー内 /クライアント アプリケーションは VueJS に基づいています。アプリケーションは次を使用して作成されましたビュークリ。イメージを構築するとき、クライアントアプリケーションはフォルダー内の一連の静的ファイルに組み込まれます。 /dist。 Dockerfile には、イメージを構築するための一連のコマンドが記述されています。

FROM node:10
WORKDIR /client
COPY ./package*.json ./
RUN npm install
RUN npm install -g http-server
COPY . .
RUN npm run build
EXPOSE 8081
CMD ["npm", "test:dev"]

package.json は、残りのプロジェクトファイルとは別にコピーおよびインストールされることに注意してください。これはパフォーマンスのために行われ、再ビルド時に /node_modules フォルダーの内容がキャッシュされるようにします。各コマンドラインは個別にキャッシュされます。

最後に、コンテナが起動するとコマンドが実行されます。 npm run dev。このコマンドは package.json に記述されています。


"scripts": {
	 "test:dev": "http-server dist -p 8081 -c 1 --push-state"
}

フォルダーからファイルを実行するには /dist、世界中にインストールされています http-server、および開発依存関係のパッケージ spa-http-serverVue Router が正しく動作するようにします。 --push-state フラグは、index.html にリダイレクトします。値 1 秒の -c フラグが追加されました。 http サーバー スクリプトをキャッシュしませんでした。これはテスト例であり、実際のプロジェクトでは nginx を使用することをお勧めします。

Vuex ストアではフィールドを作成します apiHost: 'http://localhost:3000'ここには、NodeJS API ポートが登録されます。クライアント部分の準備が整いました。これで、クライアントからバックへのすべてのリクエストがこの URL に送信されます。

NodeJSサーバーAPI

フォルダー内 /server 作成する server.js と Dockerfile:


FROM node:10
WORKDIR /server
COPY ./package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["node", "server.js"]

В server.js 表示されます URL データベース用 const url = 'mongodb://mongo:27017/';。クライアントからのクロスドメインリクエストを許可します。


const clientUrl = 'http://localhost:8081';
const corsOptions = {
  origin: clientUrl,
  optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204
};
app.use(cors());
app.all('/*', (req, res, next) => {
  res.header('Access-Control-Allow-Origin', clientUrl);
  res.header('Access-Control-Allow-Headers', 'X-Requested-With');
  next();
});
  app.get('/getProducts', cors(corsOptions), (req, res) => {
    products.getContent
      .then(data => res.json(data), err => res.json(err));
  });
  app.get('/getUsers', cors(corsOptions), (req, res) => {
    db.getUsers()
      .then(data => res.json(data), err => res.json(err));
  });

まとめ

次に、プロジェクトディレクトリに移動して実行しましょう docker-compose build 画像の構築と docker-compose up コンテナを実行します。チームは 3 つのコンテナを持ち上げます。 サーバー、クライアント、モンゴ。 NodeJS サーバーの場合、ユーザーフォルダーにリンクすることでホットリロードを構成できます。また、開発中のクライアントは、ホットリロードを使用してローカルで起動し、個別に実行する必要があります。 и モンゴ。別のサービスを開始するには、その名前を指定するだけです docker-compose up client。時々忘れずにやってください prune コンテナ、ネットワーク、イメージを削除してリソースを解放します。

完全なコードを見ることができますここで。プロジェクトはまだ開発中です。

出所： habr.com

VueJS + NodeJS + MongoDB アプリケーションを Docker にパッケージ化する方法

なぜDockerが必要なのか

始める

VueJSクライアント

NodeJSサーバーAPI

まとめ

コメントを追加します返信をキャンセル

VueJS + NodeJS + MongoDB アプリケーションを Docker にパッケージ化する方法

なぜDockerが必要なのか

始める

VueJSクライアント

NodeJSサーバーAPI

まとめ

コメントを追加します 返信をキャンセル

コメントを追加します返信をキャンセル