4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?