Vue.jsのお勉強中だよ

たま

こんにちは、たまです。2回目です。前回のは↓です。(宣伝)

Progate終わってからはpaizaに入り浸りな私です。敗北してる様子↓

ただ流石にpaizaだけではアウトプットが無い人になっちゃうので、少しずつでも色んなことを勉強してるんだよアピールをしようと思います。

***やっと本編***

はじめに

最近はVue.jsを勉強し始めました。

「えっ、初心者はHTMLとCSSとjQueryからやれよ」みたいな声もありそうですけど、「jQueryは廃れ気味でVue.js、React、Angularの3大jsフレームワークの時代ですよ」みたいな記事がたくさんあって、私のjQueryへの思いは最早塵同然です。さよならjQuery。

そんな3大フレームワークの中で私がVue.jsを選んだ理由は単純にGoogleトレンド↓

エンジニアさん達が今勉強してる分野、絶対面白いじゃないですか。

環境作るよ

GitHubに上げて色んな人に触ってもらう練習に、ついでなのでdockerなるものを見よう見まねで触ります。超参考になった記事はこちら。

本当にdockerは何も分からないのですがdocker-composeコマンドを使うやり方が楽そうなのでDockerfileとdocker-compose.ymlを書きます。結構バージョン周りの違いがあったのでtry&errorで修正も少ししました。

最初にDockerfile。色々調べてこんな感じに。

FROM node:10.15.0-alpine

WORKDIR /app

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

次にdocker-composer.yml。正直良く分かりません・・・

version: '3'
services:
  first-vue:
    container_name: first-vue
    build: .
    ports:
      - 8080:8080
    volumes:
      - .:/app
    tty: true

shellで以下のコマンドを順番に実行します。

$ docker-compose build
$ docker-compose up -d
$ docker-compose exec first-vue sh

そしたらcontainer内部のshellに入れるので(最高に自分でも何言ってるか分からない)以下のように進めます。

$ vue create .
?  Your connection to the default npm registry seems to be slow.
   Use https://registry.npm.taobao.org for faster installation? Yes

Vue CLI v3.3.0
? Generate project in current directory? Yes

Vue CLI v3.3.0
? Please pick a preset: default (babel, eslint)
? Pick the package manager to use when installing dependencies: NPM

なんか色々動くので少し待ってshellで

 $ npm run serve

> app@0.1.0 serve /app
> vue-cli-service serve

 INFO  Starting development server...
 98% after emitting CopyPlugin

 DONE  Compiled successfully in 17139ms                                                                                                                                10:49:35 PM

  App running at:
  - Local:   http://localhost:8080/

はい！立ち上がりました！ブラウザでlocalhost:8080にアクセスして見れました🌟

誰でも動かせるようにする

$ docker-compose upで一発で誰でもアプリが立ち上がるようにします。いやdocker考えた人天才すぎでは？

Dockerfileで他の人とpackageの情報を合わせるためにpackage.jsonをCOPYしてnpm installします。

FROM node:10.15.0-alpine

WORKDIR /app

COPY package.json .
COPY package-lock.json .

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

docker-compose.ymlはサーバを立ち上げるコマンドを設定してあげます。

version: '3'
services:
  first-vue:
    container_name: first-vue
    build: .
    ports:
      - 8080:8080
    volumes:
      - .:/app
      - /app/node_modules
    command: npm run serve
    tty: true

これでみんな同じ開発環境で開発できるようになりました！GitHubにあげてるのでcloneしてやってみてください🌟

ついでに公開しちゃおう

世の中にはGitHubPagesなんていうめちゃくちゃ簡単にリリースができるサービスがあります。いやGitHub神👼

ドキュメントにshellscriptがあるのでそれをほぼ丸パクリします。docker-compose上で予め`npm run build`する必要があり、やや煩雑なのでここ上手くやりたい。。

#!/usr/bin/env sh

# `npm run build` before run this script

set -e

cd dist

git init
git add -A
git commit -m 'deploy'

git push -f git@github.com.sub:osanpozuki/first-vue-deploy.git master:gh-pages

cd -

vue.config.jsは公開先のリポジトリを三項演算子の後ろに設定してください。私はそこで１時間くらい詰まりました。

module.exports = {
    publicPath: process.env.NODE_ENV === 'production'
        ? '/first-vue-deploy/'
        : '/',
}

はい！あとはshellscript走らせてちゃんと公開できました〜

終わりに

開発環境作ったり簡単に公開できる仕組みを設定したりとっっっっっっても勉強になりました！CI/CDもやってみたかったんですが、いまいちやり方が分からなかったので一旦放置になってるのが悔しいです。

まだ始まりに立ったばっかりですけどこれからVue.jsの勉強頑張るぞ〜💪