はじめに

ソフトウェアでいうコンテナは,元は運輸業界でいうコンテナに由来しているわけですが,どちらのコンテナも類似するメリットを備えています。

コンテナ(运输) コンテナ(ソフトウェア)
船や列車に乗せられる Windows / Mac / Linux等で動かせる
荷物をまとめて積載できる 必要なコード,ライブラリ,データをまとめて配布できる
輸送効率がアップする 開発・ビルド・テスト・デプロイ効率がアップする

これらのメリットをソフトウェア開発において享受するためのステップとして,

  1. 開発環境を共通化するためのCircleCIによる码头工人イメージの作成
  2. 泊坞窗コンテナ上での开発(本ブログ)
  3. 実行环境を共通化するためのCircleCIによる泊坞イメージの作成

をご绍介していきます。

なお,本ブログは2020年9月に開催した”CircleCIを学ぼうシリーズ第1弾カスタム泊坞イメージの作成“での内容を基にしています。

码头工人コンテナ上での開発:1。Webアプリ開発用リポジトリの作成とコンテナの起動

はじめに,网络アプリ开発用のリポジトリを的GitHub上に作成します。笔者はCCI-应用节点というリポジトリを作成しました。

次に,作成した空のWebアプリ開発用リポジトリをローカル環境に克隆して,克隆先のローカルのディレクトリにDockerfileファイルを作成します。Dockerfileファイルには,次の1行だけを記述します。

FROM mfunaki / CCI-IMG-节点

ここでのポイントは,FROMの后に前回构筑した泊坞イメージcci-img-nodeを网站アプリ开発用环境として指定していることです。

Dockerfileが用意できたら,このcci-img-nodeイメージからコンテナを起動します。通常,コンテナイメージのダウンロード(码头工人拉)やコンテナの作成(码头工人运行)は码头工人コマンドを使って行いますが,ここでは,Visual Studio代码とプラグインを使い,コンテナ内で开発していることをあまり意识しない(ローカル环境での开発と同様の)やり方で开発を进めていきます。

Visual Studio代码をインストールしたら,远程容器拡张机能をインストールします。

远程容器

拡張機能をインストールしたら,左下のアイコン(> <)をクリックし,表示されるメニューから重新打开集装箱をクリックします。

重新打开集装箱

次に从“Dockerfile”を选択することで,先ほど作成したDockerfileを元にコンテナイメージのダウンロード,コンテナ作成,およびコンテナ内の环境表示まで行われます(その际,环境设定ファイル.devcontainer / devcontainer.jsonが自動生成されています)。一見すると何も変わっていないように見えるVisual Studio代码の画面ですが,下図の中でオレンジ色の四角で囲っているように,表示されているファイルやコンソールはすべてコンテナ環境です。

コンテナ環境

码头工人コンテナ上での開発:2。コンテナ内での開発

それでは,実际にコードを书いていきましょう。

Node.js的のアプリケーションを開発するのに必要なベースは,cci-img-nodeイメージ作成時に/ node-appフォルダに格纳しておいたので,右下のターミナルウィンドウ(网络アプリ开発用环境です)で次のコマンドを実行して,ルートディレクトリにコピーします。

cp -r /node-app。

次に,app.jsファイルを作成し,你好,世界と出力するだけのシンプルなコードを入力します。

“使用严格”;常量表达=要求(“表示”);//常数const的PORT = 8080;常量HOST = '0.0.0.0';//应用常量应用程式=表达();app.get( '/',(REQ,RES)=> {res.send( '的Hello World \ N');});//对于从外部module.exports测试= app.listen(PORT,HOST);的console.log(`运行在http:// $ {HOST} $ {PORT}`);

次に,测试ディレクトリを作成し,网络アプリからの通知が正しいかどうか(ここでは,GETメソッドでルート/ディレクトリにアクセスしたら,ステータスコードが200(成功)で,正しく“你好世界¥N”と出力されているかどうかを確認するためのテストコードapp.test.jsを记述します。

常量请求=要求( 'supertest');常量应用程式=要求( '../应用');描述( 'CCI-APP-节点',()=> {描述( '#GET /',()=> {它( '应该返回的Hello World响应',(完成)=> {请求(应用程序)。获得( '/').expect(200)//状态.expect(的 'Hello World \ n').END(完成);})})})

では,開発したアプリケーションをテストするための定義,および起動するための定義を的package.jsonファイル中に付け加えます。

“脚本”:{“开始”:“节点app.js”、“测试”:“开玩笑”},

ここまで准备できたら,右下のターミナル画面でnpm运行测试と入力することで,jestを使ったテストを実行することができます。

npm运行测试

テスト結果に問題がなければ,npm运行开始と入力することで,Node.js的による网站アプリが起动します。

npm运行开始

画面出力にもあるとおり,ブラウザを使ってhttp://0.0.0.0:8080にアクセスすることで,サーバからの你好世界¥ñメッセージを受け取ることができます。ここでは,テスト対象のWebアプリも,Webアプリにアクセスしているブラウザ(旋度)もコンテナ上で動作しています。

旋度でのアクセス

码头工人コンテナ上での開発:3。GitHub上のリポジトリを更新

ここまで问题なく完了したら,GitHub的上の网站アプリ开発用リポジトリを更新(添加→提交→推)しておきましょう。

と,さらっと书いてしまいましたが,よく考えると,リポジトリから拉したときはローカル环境だったのに,コンテナ环境でリポジトリの更新をかけているというところに违和感を感じられなかったでしょうか?远程容器拡张机能が,ローカル环境なのかコンテナ环境なのかを意识することなくGitHub的リポジトリにアクセスする际にプロキシとして动作してくれています。

GitHub的上でご自身のリポジトリに先ほどまでの开発成果が收められているか,确认しておきましょう。

GitHub上

さいごに

Webアプリケーションの開発,およびテストまでが完了しました。最終回となるその3では,デプロイ用のコンテナイメージをCircleCIを使って自動的に作成し,码头工人中心に登録する方法を紹介していきます。