開発にVscodeとdockerを組み合わせて使用​​する詳細なプロセス

序文

Docker と VS Code を使用すると、ローカル開発環境全体を最適化し、プロジェクトの進行をスピードアップできます。すべての環境で同じベースイメージを使用すると、すべての開発者に同じエディター ツールが提供され、標準化が容易になります。

大規模プロジェクトのチームは、まずインストールの依存関係やカーネルのバージョンなどの開発環境が統一されていることを確認する必要があります。開発環境の一貫性の問題を解決するために、従来の伝統的なアプローチでは、開発者が従うべきガイドラインを策定しますが、それにもかかわらず、実際の開発プロセスでは依然としてさまざまな障害に遭遇します。

環境を設定する一般的な方法を次の図に示します。

もう 1 つのソリューションは、開発者がコンテナー内でバンドル解除できる、必要なすべてのライブラリと依存関係が事前に構成された開発環境です。開発者はコンテナによって提供される分離された環境で作業できるようになります。これにより、開発者がコード リポジトリを複製してから作業を開始するまでの時間が大幅に短縮されます。

すべての開発者に同じ環境を提供することに加えて、これを利用してプロジェクトに必要な特定の拡張機能を自動的にインストールすることもできます。これにより、ツールの一貫性のない使用が回避され、開発者は手動でインストールする手間が省けます。

以下は、VS Code の Remote — Containers 拡張機能を備えた Docker を使用することで実現されます。

設定

この記事では、Node 環境で実行される JavaScript アプリケーションの例を紹介します。すべてのテクノロジー スタックの詳細なドキュメントについては、「コンテナーでの開発」をお読みください。

Docker と VS Code がまだインストールされていない場合は、まずそれらをインストールしてください。 VS Code に Remote — Containers 拡張機能をインストールします。マシン上で Docker が実行されていることを確認してください。

プロジェクトに移動し、ルート ディレクトリに .devcontainer というフォルダーを作成します。この新しいフォルダーには、コンテナーの開発に必要な構成ファイルが含まれています。

.devcontainer に Dockerfile と devcontainer.json を作成し、次の構成を追加します。

Dockerfileファイルは次のとおりです

# 開発コンテナで使用するベースイメージを指定します。
# 一貫性を保つために、アプリケーションが本番環境で使用するのとまったく同じベースイメージを使用できます。
# これにより、「ローカルでは動作するが、PROD では動作しない」などの予期しない事態を防ぐことができます。

ノード:14.17.0-alpineから

# さらに、ベースイメージを構成するときに、環境の他の依存関係をインストールすることもできます。
# この例では、Alpine バージョンの node には Git が付属していないため、Git をインストールしています。 

apkアップデートを実行する
apk add gitを実行する

devcontainer.jsonファイルは次のとおりです

{
    "名前": "DevContainer ReactApp",

    // イメージをビルドしてコンテナを実行するために使用できる Dockerfile を開発コンテナに提供します。
    "dockerFile": "Dockerファイル",

    // コンテナが作成される前に実行するコマンド。
    // この場合は、ノード モジュールをインストールします。
    "initializeCommand": "yarn インストール",

    // コンテナが起動するたびに開発サーバーを起動します。
    // これはコンテナを再度開いたときにもトリガーされます。 
    "postStartCommand": "ヤーン開始",

    // コンテナ内で実行されているアプリケーションのポートをローカル マシンに転送します。
    "転送ポート": [3000],

    // 開発者が使用するために自動的にインストールする必須の VSC コード拡張機能。
    「拡張機能」: [
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode",
        「eamodio.gitlens」
    ]

    // devcontainer.json 参照を使用して、可能なすべての構成を調べます。
    // https://code.visualstudio.com/docs/remote/devcontainerjson-reference
}

それが完了したら、コンテナを構築する必要があります。これを行うには、VS Code コマンド パレットから [コンテナー内のフォルダーを開く] または [コンテナー内で再度開く] を使用します。

これにより、開発コンテナが初期化されます。 docker ベースイメージをプルし、コンテナを構成し、開発サーバーを起動します。

結論

コンテナの構築と構成は、時間のかかる 1 回限りのアクティビティです。変更がない場合、その後の再構築はより高速になります。ただし、devcontainer.json または Dockerfile が変更された場合は、変更を適用するには再構築が必要です。直接再度開こうとすると、再構築するように求められます。

これで、開発に Vscode と docker を組み合わせて使用​​する方法についての記事は終了です。Vscode と docker を組み合わせた開発に関する関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。