Fukuoka.js #6

## Vue Cli 3 を触ってみた `#6 FukuokaJS LTイベント` 清家史郎(@seike460)

###### Who? Fusic Co., Ltd.  清家史郎  @seike460    

### tech - Program Language - PHP - Go - Elixir - infrastructure - Server - infrastructure as code - Network - Serverless(AWS)

### products ##### Go - s3ry (s3 prompt cli) - https://github.com/seike460/s3ry - utakata (Serverless Slack Notificatier) - https://github.com/seike460/utakata

### Community - PHP - fukuoka.php - Go - fukuoka.go - Elixir - fukuoka.ex

### Organizer - Serverless Meetup Fukuoka

### Agenda - Vue Cli? <!-- .element: class="fragment" --> - create project <!-- .element: class="fragment" --> - Serverless <!-- .element: class="fragment" --> - まとめ <!-- .element: class="fragment" -->

### Vue Cliとは - Vue の環境を簡単に作成出来る <!-- .element: class="fragment" --> - BabelやE2Eテストとかの初期設定もいい感じに <!-- .element: class="fragment" --> - GUIもあるよ！ <!-- .element: class="fragment" --> 🤔? <!-- .element: class="fragment" -->

インストール ``` yarn add @vue/cli ```

CLI実行 ``` ./node_modules/@vue/cli/bin/vue.js create プロジェクト名 ```

以前使用したVue CLIの設定を使い回せる preset を選択 ``` Vue CLI v3.0.3 ? Please pick a preset: seike460-vue (vue-router, vuex, sass, babel, typescript, pwa, eslint, unit-mocha, e2e-cypress) default (babel, eslint) ❯ Manually select features ```

Vue Routerや Vuex等の使うライブラリ等を選択 ``` Vue CLI v3.0.3 ? Please pick a preset: Manually select features ? Check the features needed for your project: ❯◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◯ Router ◯ Vuex ◯ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing ```

class-styleのコンポーネント syntaxを使うか選択 ``` ? Use class-style component syntax? (Y/n) ```

自動検出された polyfills にBabelとTypeScriptを使用するか選択 ``` ? Use Babel alongside TypeScript for auto-detected polyfills? (Y/n) ```

Vue Routerのヒストリーモードを使用するかどうか選択 ``` ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) ```

CSSプリプロセッサに何を使うか選択 ``` ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): ❯ Sass/SCSS Less Stylus ```

Linter/Formatterを選択 ``` ? Pick a linter / formatter config: ❯ TSLint ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config ESLint + Prettier ```

いつ Lintを実行するかを選択 ``` ? Pick additional lint features: ❯◉ Lint on save ◉ Lint and fix on commit ```

ユニットテストツールを選択 ``` ? Pick a unit testing solution: ❯ Mocha + Chai Jest ```

E2Eテストツールを選択 - [Cypress for CircleCi](https://slide.seike460.com/slides/chibi_developer11#/) Cypressがあるのテンション上がりました ``` ? Pick a E2E testing solution: ❯ Cypress (Chrome only) Nightwatch (Selenium-based) ```

設定をConfigで管理するか、package.jsonで管理するかを選択 ``` ? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? ❯ In dedicated config files In package.json ```

preset を次回からも使うか選択 ``` ? Save this as a preset for future projects? (y/N) ```

package manager を選択 ``` ? Pick the package manager to use when installing dependencies: ❯ Use Yarn Use NPM ```

完成！ ``` Vue CLI v3.0.3 ✨ Creating project in あなたのインストールPATH 🗃 Initializing git repository... ⚙ Installing CLI plugins. This might take a while... yarn install v1.5.1 info No lockfile found. [1/4] 🔍 Resolving packages... [2/4] 🚚 Fetching packages... [3/4] 🔗 Linking dependencies... [4/4] 📃 Building fresh packages... success Saved lockfile. ✨ Done in 22.89s. 🚀 Invoking generators... 📦 Installing additional dependencies... [-/4] ⠄ waiting... yarn install v1.5.1 [1/4] 🔍 Resolving packages... [2/4] 🚚 Fetching packages... [3/4] 🔗 Linking dependencies... [4/4] 📃 Building fresh packages... success Saved lockfile. ✨ Done in 30.48s. ⚓ Running completion hooks... 📄 Generating README.md... 🎉 Successfully created project cli. 👉 Get started with the following commands: ```

``` cd プロジェクト名 npm run serve ```

おなじみのページが！ 

Vue Cli にはGUIもあります 🤔? <!-- .element: class="fragment" -->

ui コマンドを実行すると… ``` ./node_modules/@vue/cli/bin/vue.js ui ```

プロジェクト一覧 










一覧性があるし、CLIが苦手な人も安心

Serverless Framework とつないでみる Serverless Framework の細かい説明は↓ [Serverless Framework Production Deploy](https://slide.seike460.com/slides/serverlessfukuoka2#/) ``` ./node_modules/serverless/bin/serverless create --template aws-go-dep ```

### CORS(Cross-Origin Resource Sharing) 設定 `Serverless Architectureへのアクセスを許可`

- serverless.yml に`cors=true`設定 

- Access-Control-Allow-Origin設定  

deploy ``` make && yarn install && ./node_modules/serverless/bin/serverless deploy -v ```

Axiosで取得 ``` mounted() { Axios.default.get('https://XxxxxxxxxX.execute-api.us-east-1.amazonaws.com/dev/hello') .then((response) => { console.log(response) } ).catch((error) => { console.log(error) }) }, ```

#### 纏め - Vue Cli が面倒な設定をいい感じにしてくれる - GUIがあるので、CLIが苦手な人でも安心 - Serverless Frameworkってのがあるよ

Thank you! Fusicは技術が大好きなエンジニアを募集しています  https://fusic.github.io/