NuxtのアプリをDockerに移行して、ECRにプッシュするまで

<h2>目次</h2>
<ol>
<li>背景</li>
<li>ECRレポジトリの作成</li>
<li>docker imageの作成</li>
<li>ローカルでdocker runをしてdocker imageを実行（確認作業）</li>
<li>ECRにdocker imageをpush</li>
</ol>
<h2>背景</h2>
<p>Nuxtを使ったSPAのWebサービス、ちゃんと動いてはいたんですけど、<br>
「ビルドをするたびにユーザー側では画面出なくなっちゃうの？」<br>
という問題がありまして、じゃあNuxt用のサーバーを2台用意して縮退して…とか考えたものの<br>
「細かい画面の変更とかの度にそのオペレーションやるの？」<br>
ってことで、<strong>このご時世、やっぱりDockerからは逃げられないのかな…</strong>ってことで観念しました。<br>
（Nuxtの開発を頼んだ外注先にはDocker込みの設計でお願いした気がするんだけどな…）<br>
（「dockerは使ってません！」って言われた時に引いたのが間違いだったな…）</p>
<h2>参考</h2>
<p><a href="https://qiita.com/yujiro0102/items/0a4672d7f8ea64fe1d6d">Nuxt.jsでアプリ作成→Dockerfileを使ってイメージ作成→fargateでデプロイ→ドメイン設定・SSL化まで</a><br>
Nuxtのアプリは問題なく動いているので、<br>
1. nuxtアプリ作成<br>
2. ローカル環境にてnuxtアプリを実行（確認作業）<br>
は不要と判断。</p>
<h2>ECRレポジトリの作成</h2>
<p>AWSのコンソールから作りました。
名前くらいしか決めていないですし、省略。</p>
<h2>docker imageの作成</h2>
<p>Dockerfileは、Nuxtのプロジェクトディレクトリの下に作るらしい。なるほど。  </p>
<div class="codehilite"><pre><span class="c"># Nodeイメージの取得</span>
<span class="k">FROM</span><span class="s"> node:14.4.0-alpine</span>

<span class="c"># ワーキングディレクトリの指定</span>
<span class="k">WORKDIR</span><span class="s"> /app</span>

<span class="c"># パッケージをコピー(このファイルだけ別にして先にインストールしたほうが良い)</span>
COPY package*.json ./

<span class="c"># npm モジュールをインストール</span>
<span class="k">RUN</span> npm install --quiet

<span class="c"># その他のファイルをコピー</span>
COPY . .

<span class="c"># このコマンドをしないといけないとwarnが出たので</span>
<span class="k">RUN</span> npm rebuild

<span class="c"># 本当はいらないが開発環境でvue-cliを使っていたのでそこに含まれているパッケージを使っているようでwarnが出たので入れ</span>
る
<span class="k">RUN</span> npm install vue-cli -g

<span class="c"># ビルドします</span>
<span class="k">RUN</span> npm run build

<span class="c"># PORT3000で動かす</span>
<span class="k">EXPOSE</span><span class="s"> 3000</span>

<span class="c"># 起動コマンド</span>
<span class="k">CMD</span><span class="s"> [&quot;npm&quot;, &quot;run&quot;, &quot;start&quot;]</span>
</pre></div>


<p>docker imageの作成  </p>
<div class="codehilite"><pre>docker build -t &lt;repositry-name&gt; .  
</pre></div>


<p><strong>こけた（赤字まみれで超怖い）</strong>  </p>
<p><a href="https://blog.cloud-acct.com/posts/u-docker-nuxtjs-vuetify-install/">Docker AlpineベースのNode.js上で動くNuxt.jsにVuetifyを導入する</a><br>
たぶんこれだと思うのよね…  </p>
<p>というわけで、Dockerfileを修正。</p>
<div class="codehilite"><pre><span class="c"># Nodeイメージの取得</span>
<span class="k">FROM</span><span class="s"> node:14.4.0-alpine</span>

<span class="c"># ワーキングディレクトリの指定</span>
<span class="k">WORKDIR</span><span class="s"> /app</span>

<span class="c"># パッケージをコピー(このファイルだけ別にして先にインストールしたほうが良い)</span>
COPY package*.json ./

<span class="c">#依存関係をインストール</span>
<span class="k">RUN</span> apk update <span class="o">&amp;&amp;</span> <span class="se">\</span>
    apk upgrade <span class="o">&amp;&amp;</span> <span class="se">\</span>
    apk add --no-cache make gcc g++ python <span class="o">&amp;&amp;</span> <span class="se">\</span>
    # yarn installの記載場所を移動
    yarn install

<span class="c"># npm モジュールをインストール</span>
<span class="k">RUN</span> npm install --quiet

<span class="c"># その他のファイルをコピー</span>
COPY . .

<span class="c"># このコマンドをしないといけないとwarnが出たので</span>
<span class="k">RUN</span> npm rebuild

<span class="c"># 本当はいらないが開発環境でvue-cliを使っていたのでそこに含まれているパッケージを使っているようでwarnが出たので入れる</span>
<span class="k">RUN</span> npm install vue-cli -g

<span class="c"># ビルドします</span>
<span class="k">RUN</span> npm run build

<span class="c"># PORT3000で動かす</span>
<span class="k">EXPOSE</span><span class="s"> 3000</span>

<span class="c"># 起動コマンド</span>
<span class="k">CMD</span><span class="s"> [&quot;npm&quot;, &quot;run&quot;, &quot;start&quot;]</span>
</pre></div>


<h2>docker imageの作成（再チャレンジ）</h2>
<div class="codehilite"><pre>docker build -t &lt;repositry-name&gt; .  
</pre></div>


<p>赤字のwarnはたくさん出たけど、無事に成功したっぽい。<br>
warnはオレンジ色とかで出してくれないかな…  </p>
<h2>ローカルでdocker runをしてdocker imageを実行（確認作業）</h2>
<div class="codehilite"><pre>docker run -it -p 3000:3000 &lt;repositry-name&gt;
</pre></div>


<p>動いたっぽい。</p>
<div class="codehilite"><pre>   lqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqk
   x                                           x
   x   Nuxt.js v2.12.2                         x
   x   Running in production mode (spa)        x
   x   Memory usage: 23.6 MB (RSS: 68.7 MB)    x
   x                                           x
   x   Listening on: http://172.17.0.2:3000/   x
   x                                           x
   mqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqj
</pre></div>


<p>curlコマンドで確認してみる。</p>
<div class="codehilite"><pre>curl http://localhost:3000/
curl http://172.17.0.2:3000
</pre></div>


<p>どっちもちゃんと画面が返ってきたので問題なさそう。</p>
<h2>ECRにdocker imageをpush</h2>
<p>ECRにログイン</p>
<div class="codehilite"><pre>(aws ecr get-login --no-include-email --region ap-northeast-1)
</pre></div>


<p>ぶわーっと色々出てくる。<br>
出てきたものをコピペして実行したら、「Login Succeeded」と出た。<br>
最初はこのコマンドだけでログインできるんだと思っていた…</p>
<p>tagの変更</p>
<div class="codehilite"><pre>docker tag &lt;repositry-name&gt;:latest ************.dkr.ecr.ap-northeast-1.amazonaws.com/&lt;repositry-name&gt;:latest
</pre></div>


<p>さらっと終わる。</p>
<p>push</p>
<div class="codehilite"><pre>docker push ************.dkr.ecr.ap-northeast-1.amazonaws.com/&lt;repositry-name&gt;:latest
</pre></div>


<p>時間がかかる。<br>
ECRのコンソール画面から確認すると、イメージが出来上がっている！！<br>
簡単！！  </p>