LoginSignup
4
0

More than 3 years have passed since last update.

Vue.tsをDockerに構築

Last updated at Posted at 2019-09-08

Vue.tsをDockerに構築したい

Vue.jsをDockerに構築をする方法はあったんですが、Vue3.0からTypeScriptが対応されたとの事だったのでせっかくならTSでやりたいと思ったので自分なりにやってみました。
OSはMacです。Dockerが入ってる前提で進めます。

Dockerfileを用意


FROM node:8.11.3-alpine

WORKDIR /app

RUN apk update && \
    npm install -g @vue/cli

EXPOSE 9000

CMD ["/bin/sh"]

コンテナのイメージをビルド

$ docker build -t vue_app_image .

ビルドしたイメージからコンテナを起動

$ docker run -v `pwd`:/app -p 9000:9000 --name vue_app -it -d vue_app_image

コンテナに入ってvueプロジェクトの準備

$ docker exec -it vue_app sh

コンテナ内でのコマンド

ここからが情報をかき集めて自分なりに行った方法です。

webpackが無いとエラーが出るのでインストールします。

/app # npm install --save-dev webpack webpack-cli webpack-dev-server

カレントディレクトリにVue Projectを作成

/app # vue create .

Manually select features を選択した後に使用言語を選ぶのでTypeScriptを選択します。

vue.config.jsをプロジェクトルートに作成

プロジェクトルートにvue.config.jsを作成すると自動で読み込まれるようです。すげえ


module.exports = {
    devServer: {
        host: '0.0.0.0',
        port: 9000,
        disableHostCheck: true,
    },
};

実行

/app # npm run serve

http://0.0.0.0:9000/にアクセスするとVueの画面が出てくるかと思います。
もっといい方法があれば教えてください。VueもDockerもまだまだなので...

参考サイト

https://qiita.com/nrslib/items/be90cc19fa3122266fd7
https://qiita.com/rh_taro/items/ca08b930f704275286a4
https://log.pocka.io/posts/vue-webpack-tutorial/
https://dev.classmethod.jp/client-side/spa/change-vue-project-devserver-port/

4
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
0