<h1 id="%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB">
<a class="header-anchor-link" href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> はじめに</h1>
<p>少し前に<a href="https://zenn.dev/rihito/articles/96dfad8d4990f9" target="_blank">Reactでの環境構築</a>を行なった。<br>
今回はVueの環境を構築してみたので、備忘録として残す。<br>
(React全然にできるようになってない…)</p>
<h1 id="tl%3Bdr">
<a class="header-anchor-link" href="#tl%3Bdr" aria-hidden="true"></a> TL;DR</h1>
<p>Dockerとdocker-composeでのVue環境の構築手順です。<br>
初心者なので、かなり初歩的な内容で他の方が執筆なさった記事を参考にしています。</p>
<h1 id="%E5%89%8D%E6%8F%90%E7%92%B0%E5%A2%83">
<a class="header-anchor-link" href="#%E5%89%8D%E6%8F%90%E7%92%B0%E5%A2%83" aria-hidden="true"></a> 前提環境</h1>
<p>pc: MacBookPro(2017)<br>
os: Big Sur<br>
Homebrew 3.4.10<br>
Docker version 20.10.13<br>
docker-compose version 1.29.2</p>
<p>Homebrew~docker-composeのインストールはdocker+poetryでpythonを使うの序盤に書いています。</p>
<h1 id="%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%88%E3%83%AA%E6%A7%8B%E6%88%90">
<a class="header-anchor-link" href="#%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%88%E3%83%AA%E6%A7%8B%E6%88%90" aria-hidden="true"></a> ディレクトリ構成</h1>
<p>下記のコマンドで作業をするディレクトリを作成します。</p>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash">$ <span class="token function">mkdir</span> vueApp
</code></pre></div><p>Dockerfileとdocker-compose.yamlも空で良いので作成しておきます。作成コマンド例<code>touch Dockerfile</code>。<br>
今回の例では下記のような構成となります。</p>
<div class="code-block-container">
<div class="code-block-filename-container"><span class="code-block-filename">構成</span></div>
<pre class="language-bash"><code class="language-bash">$ tree
<span class="token builtin class-name">.</span>
├── Dockerfile
├── docker-compose.yaml
└── vueApp
</code></pre>
</div><h1 id="%E7%92%B0%E5%A2%83%E6%A7%8B%E7%AF%89%E6%89%8B%E9%A0%86">
<a class="header-anchor-link" href="#%E7%92%B0%E5%A2%83%E6%A7%8B%E7%AF%89%E6%89%8B%E9%A0%86" aria-hidden="true"></a> 環境構築手順</h1>
<h2 id="dockerfile%E3%81%AE%E4%BD%9C%E6%88%90">
<a class="header-anchor-link" href="#dockerfile%E3%81%AE%E4%BD%9C%E6%88%90" aria-hidden="true"></a> Dockerfileの作成</h2>
<div class="code-block-container">
<div class="code-block-filename-container"><span class="code-block-filename">Dockerfile</span></div>
<pre class="language-dockerfile"><code class="language-dockerfile"><span class="token instruction"><span class="token keyword">FROM</span> node:16.15.0</span>
<span class="token instruction"><span class="token keyword">WORKDIR</span> /usr/src/app</span>
</code></pre>
</div><p>NodeJsのバージョンを<a href="https://nodejs.org/en/" target="_blank" rel="nofollow noopener noreferrer">公式サイト</a>で確認します。その後に、該当のバージョンを<a href="https://hub.docker.com/_/node/?tab=description&amp;page=1&amp;ordering=last_updated" target="_blank" rel="nofollow noopener noreferrer">DockerHubのnodeリポジトリ</a>で探します。</p>
<p>私が確認した時はNodeJs 16.15.0がLTSだったので、nodeイメージはnode:16.15.0-alpineを使用します。</p>
<h2 id="docker-compose.yaml%E3%81%AE%E4%BD%9C%E6%88%90">
<a class="header-anchor-link" href="#docker-compose.yaml%E3%81%AE%E4%BD%9C%E6%88%90" aria-hidden="true"></a> docker-compose.yamlの作成</h2>
<div class="code-block-container">
<div class="code-block-filename-container"><span class="code-block-filename">docker-compose.yaml</span></div>
<pre class="language-yaml"><code class="language-yaml"><span class="token key atrule">version</span><span class="token punctuation">:</span> <span class="token string">'3.9'</span>
<span class="token key atrule">services</span><span class="token punctuation">:</span>
  <span class="token key atrule">vue-app</span><span class="token punctuation">:</span>
    <span class="token key atrule">build</span><span class="token punctuation">:</span>
      <span class="token key atrule">context</span><span class="token punctuation">:</span> .
      <span class="token key atrule">dockerfile</span><span class="token punctuation">:</span> Dockerfile
    <span class="token key atrule">tty</span><span class="token punctuation">:</span> <span class="token boolean important">true</span>
    <span class="token key atrule">environment</span><span class="token punctuation">:</span>
      <span class="token punctuation">-</span> NODE_ENV=development
    <span class="token key atrule">volumes</span><span class="token punctuation">:</span>
    <span class="token punctuation">-</span> ./vueApp<span class="token punctuation">:</span>/usr/src/app
    <span class="token key atrule">command</span><span class="token punctuation">:</span> sh <span class="token punctuation">-</span>c "cd vue<span class="token punctuation">-</span>sample <span class="token important">&amp;&amp;</span> npm run serve"
    <span class="token key atrule">ports</span><span class="token punctuation">:</span>
    <span class="token punctuation">-</span> <span class="token string">"8080:8080"</span>
</code></pre>
</div><h2 id="%E3%82%B3%E3%83%B3%E3%83%86%E3%83%8A%E3%81%A8vue%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E4%BD%9C%E6%88%90">
<a class="header-anchor-link" href="#%E3%82%B3%E3%83%B3%E3%83%86%E3%83%8A%E3%81%A8vue%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E4%BD%9C%E6%88%90" aria-hidden="true"></a> コンテナとVueプロジェクト作成</h2>
<p>下記のdocker-composeコマンドでコンテナを起動します。</p>
<div class="code-block-container">
<div class="code-block-filename-container"><span class="code-block-filename">コンテナ起動</span></div>
<pre class="language-bash"><code class="language-bash">$ <span class="token function">docker-compose</span> build
</code></pre>
</div><p>次のコマンドでプロジェクトを作成。<br>
Reactでは<code>--template typescript</code>オプションを付けるとtypescriptをインストールで来ましたが、Vueでは異なります。(Vue3ではVue自体がTypeScriptを使って記述されていることもあり特別な設定を行うことなくTypeScriptを利用できるそうです。)<br>
まだ、詳しく読んでないですが、<a href="https://reffect.co.jp/vue/vue3-typescript#TypeScript" target="_blank" rel="nofollow noopener noreferrer">簡単な例で始めるVue3でTypeScript入門</a>が参考になりそう？</p>
<div class="code-block-container">
<div class="code-block-filename-container"><span class="code-block-filename">プロジェクト作成</span></div>
<pre class="language-bash"><code class="language-bash">$ <span class="token function">docker-compose</span> run <span class="token parameter variable">--rm</span> vue-app <span class="token function">sh</span> <span class="token parameter variable">-c</span>  <span class="token string">"npm install -g @vue/cli @vue/cli-init &amp;&amp; vue create vue-sample"</span>
---
Vue CLI v5.0.4
? Please pick a preset: <span class="token punctuation">(</span>Use arrow keys<span class="token punctuation">)</span>
❯ Default <span class="token punctuation">(</span><span class="token punctuation">[</span>Vue <span class="token number">3</span><span class="token punctuation">]</span> babel, eslint<span class="token punctuation">)</span>
  Default <span class="token punctuation">(</span><span class="token punctuation">[</span>Vue <span class="token number">2</span><span class="token punctuation">]</span> babel, eslint<span class="token punctuation">)</span>
  Manually <span class="token keyword">select</span> features
  
---
Vue CLI v5.0.4
? Please pick a preset: Default <span class="token punctuation">(</span><span class="token punctuation">[</span>Vue <span class="token number">3</span><span class="token punctuation">]</span> babel, eslint<span class="token punctuation">)</span>
? Pick the package manager to use when installing dependencies:
  Use Yarn
❯ Use NPM

---
  Creating project <span class="token keyword">in</span> /usr/src/app/vue-sample.
⚙️  Installing CLI plugins. This might take a while<span class="token punctuation">..</span>.


added <span class="token number">844</span> packages, and audited <span class="token number">845</span> packages <span class="token keyword">in</span> 4m

<span class="token number">86</span> packages are looking <span class="token keyword">for</span> funding
  run <span class="token variable"><span class="token variable">`</span><span class="token function">npm</span> fund<span class="token variable">`</span></span> <span class="token keyword">for</span> details

found <span class="token number">0</span> vulnerabilities
🚀  Invoking generators<span class="token punctuation">..</span>.
📦  Installing additional dependencies<span class="token punctuation">..</span>.


added <span class="token number">95</span> packages, and audited <span class="token number">940</span> packages <span class="token keyword">in</span> 44s

<span class="token number">96</span> packages are looking <span class="token keyword">for</span> funding
  run <span class="token variable"><span class="token variable">`</span><span class="token function">npm</span> fund<span class="token variable">`</span></span> <span class="token keyword">for</span> details

found <span class="token number">0</span> vulnerabilities
⚓  Running completion hooks<span class="token punctuation">..</span>.

📄  Generating README.md<span class="token punctuation">..</span>.

🎉  Successfully created project vue-sample.
👉  Get started with the following commands:

 $ <span class="token builtin class-name">cd</span> vue-sample
 $ <span class="token function">npm</span> run serve
</code></pre>
</div><p>上記のような成功メッセージが完了されればOKです。</p>
<h2 id="%E3%82%B3%E3%83%B3%E3%83%86%E3%83%8A%E8%B5%B7%E5%8B%95">
<a class="header-anchor-link" href="#%E3%82%B3%E3%83%B3%E3%83%86%E3%83%8A%E8%B5%B7%E5%8B%95" aria-hidden="true"></a> コンテナ起動</h2>
<p>下記のコマンドでコンテナ起動します。オプションで<code>-d</code>を付けるとバックグランドで動作します。</p>
<div class="code-block-container">
<div class="code-block-filename-container"><span class="code-block-filename">build container</span></div>
<pre class="language-bash"><code class="language-bash">$ <span class="token function">docker-compose</span> up <span class="token punctuation">(</span>-d<span class="token punctuation">)</span>
</code></pre>
</div><p><code>-d</code>オプションを付けない場合は別のターミナルなどで次のコマンドを実行してログを見てみます。</p>
<div class="code-block-container">
<div class="code-block-filename-container"><span class="code-block-filename">display log</span></div>
<pre class="language-bash"><code class="language-bash">$ <span class="token function">docker</span> compose logs <span class="token parameter variable">-f</span>
</code></pre>
</div><p>下記のようなメッセージが表示されたら<a href="http://localhost:8080" target="_blank" rel="nofollow noopener noreferrer">http://localhost:8080</a>にブラウザからアクセスします。Vueの画面が表示されるはずです。</p>
<h1 id="%E3%81%9D%E3%81%AE%E4%BB%96">
<a class="header-anchor-link" href="#%E3%81%9D%E3%81%AE%E4%BB%96" aria-hidden="true"></a> その他</h1>
<p>今回はnpmやvue cliを使用したvueの環境構築を行ったが、npmやvue cliに慣れていないと最初は詰まると思う。<br>
もし、大規模な開発をしない場合はCDN版を使ったほうが良い？<br>
(自身の経験がないので今後使って行きたいと思います。)</p>
<h1 id="%E5%8F%82%E8%80%83">
<a class="header-anchor-link" href="#%E5%8F%82%E8%80%83" aria-hidden="true"></a> 参考</h1>
<ul>
<li><a href="https://zenn.dev/chida/articles/8f16e42364398c" target="_blank">【Vue.js】Docker Composeで開発環境を構築する</a></li>
<li><a href="https://engineer-ninaritai.com/docker-vue/" target="_blank" rel="nofollow noopener noreferrer">【初心者向け】DockerでVueの環境を構築する手順を解説</a></li>
<li><a href="https://rurukblog.com/post/vue-fastapi-docker/" target="_blank" rel="nofollow noopener noreferrer">VueとFastAPIを連携させ画面表示を行う(Docker利用)</a></li>
<li><a href="https://reffect.co.jp/vue/vue3-typescript" target="_blank" rel="nofollow noopener noreferrer">簡単な例で始めるVue3でTypeScript入門</a></li>
</ul>
<h1 id="%E6%9C%80%E5%BE%8C%E3%81%AB">
<a class="header-anchor-link" href="#%E6%9C%80%E5%BE%8C%E3%81%AB" aria-hidden="true"></a> 最後に</h1>
<p>ReactとVueはどちらを使えば良いのかすごく迷います。<br>
初心者はVueの方が扱いやすいんですかね…</p>


dockerでVue環境を構築

コンテナとVueプロジェクト作成

Discussion