Vue.tsをDockerに構築
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/
Author And Source
この問題について(Vue.tsをDockerに構築), 我々は、より多くの情報をここで見つけました https://qiita.com/karaimonoOitii/items/23494081504d8d7fe5cb著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .