2020.8.2-学習ノートまとめ

someone
2 8月, 2020

■8月案件

8月の案件の準備として
次案件の候補が3つあるが、技術スタックが

  • Vue or React
  • Azure or AWS

なのでいろいろやる



■Ubuntu20.04

ローカルPCのセットアップ情報みると、
Ubuntuとかnode/npmあるけど、設定情報とかもうカオスなのでubuntu18.04をアンスコしてから、20.04をセットアップ。
⇒windows storeからダウンロードできる。
ISOとか、なんかよーわからん（昔やったけど忘れた）ワードガン無視でインストール。
user:ono
ps:1111


■Nuxt本

下記の本を購入したので、学習する


解説サイト

本の内容

  1. 環境構築
  2. API連携
  3. layout共通化/hook/プラグイン関連/vuex
  4. firebase連携
  5. jestのテスト環境
  6. テスト自動化
  7. axiosでのプロキシ通信
  8. デプロイの各種設定

■環境構築

インストールするもの

  • Node.js
  • Yarn
  • direnv
  • Vue-cli

Ubuntu

nodeをubuntuにインストールするときの記事
・Ubuntuに最新のNode.jsを難なくインストールする

Node.js/npm

  1. sudo apt install -y nodejs npm　※1
  2. sudo npm install n -g
  3. sudo n stable
  4. sudo apt purge -y nodejs npm
  5. exec $SHELL -l

Yarn

Yarnのインストール手順
sudo apt install yarn(※2)

direnv

sudo apt install direnv
~/.bashrc に設定値追加
echo 'eval "$(direnv hook bash)"' >> ~/.bashrc
source ~/.bashrc

Vue CLI

npm i -g @vue/cli-init(※3)(※4)

アプリケーション作成

vue init nuxt-community/starter-template my-first-nuxt-app
質問は全てEnter

cd my-first-nuxt-app
npm install
npm run dev
ローカル起動

ページ変更

開発サーバを起動したのでソースを書き換える作業(※5)
pages/index.vue



ルーティングとページコンポーネント

_idみたいにすることで動的なページルートを実現している

動的ルーティング２

<template>
    <div>
        <p>
            User ID: {{ userId }}
        </p>
    </div>
</template>

<script>
export default {
  data() {
    return {
    userId: this.$route.params.id
  }
}
</script>

axios-module

yarn start @nuxtjs/axios(※7)
npm install --save @nuxtjs/axios

nuxt.config.jsの編集
  /*
  ** Customize the progress bar color
  */
  loading: { color: '#3B8070' },

  /*
  **追加モジュールの情報
  */
  modules: [
    '@nuxtjs/axios'
  ],
  axios: {

  },
index.vue
<template>
    <div>
    </div>
</template>

<script>
export default {
    async mounted() {
    console.log(
      JSON.stringify(
        this.$axios.$get('https://qiita.com/api/v2/items?query=tag:nuxt.js'), true, '  ')
    )
  }
}
</script>

認証情報付きAPI

Qiitaのアクセストークン取得

HTTPのリクエストに対して、ヘッダーに認証情報をインジェクションする実装
export default function ({ $axios }) {
    $axios.onRequest((config) => {
        if (process.env.QIITA_TOKEN) {
            config.headers.common['Authorization'] = process.env.QIITA_TOKEN
        }
        return config
    })
}
config.jsで読み出し設定もやる
  plugins: [
    '~/plugins/axios.js'
  ],
  env: {
    QIITA_TOKEN: process.env.QIITA_TOKEN
  },
direnvの設定

サーバーサイドレンダリング

<script>
import { mapGetters } from 'vuex';
export default {
  async asyncData({ store }) {
    if (store.getters['items'].length) {
      return;
    }
    await store.dispatch('fetchItems');
  },
  computed: {
    ...mapGetters(['items'])
  }
};
</script>

ヘッダーhead()による情報付与-SEO対策

  head: {
    title: 'my-first-nuxt-app',
    titleTemplate: '%s | Nuxt.js tag item viewer',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Nuxt.js project' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },



import { mapGetters } from 'vuex';
export default {
  head() {
    return {
      title: this.user.id
    }
  },

ロジックの移譲

Vuexのストア連携を実装
インスタンスの状態管理とキャッシュ戦略
store/index.js　基本形
import Vuex from 'vuex'

export default () =>
    new Vuex.Store({
        store: {
            items: []
        }
    })
ガッツリ移植
import Vuex from 'vuex';

const store = {
    state: {
        items: [],
        users: {},
        userItems: {}
    },
    getters: {
        items: state => state.items,
        users: state => state.users,
        userItems: state => state.userItems
    },
    mutations: {
        setItems(state, { items }) {
            state.items = items;
        },
        setUser(state, { user }) {
            state.users[user.id] = user;
        },
        setUserItems(state, { user, items }) {
            state.userItems[user.id] = items;
        }
    },
    actions: {
        async fetchItems({ commit }) {
            const items = await this.$axios.$get(
                'https://qiita.com/api/v2/items?query=tag:nuxt.js'
            );
            commit('setItems', { items });
        },
        async fetchUserInfo({ commit }, { id }) {
            const [user, items] = await Promise.all([
                this.$axios.$get(`https://qiita.com/api/v2/users/${id}`),
                this.$axios.$get(`https://qiita.com/api/v2/items?query=user:${id}`)
            ]);
            commit('setUser', { user });
            commit('setUserItems', { user, items });
        }
    }
};

export default () => new Vuex.Store(store);
■完成系


■エラーハンドリング

（Note）
(※1)apt-getでエラー

・UbuntuでUnable to locate packageのエラー解決法
⇒aptが古いのでupdate
$sudo apt update

弾かれてないからok
(※2)
yarnの公式インストール手順やQiita記事に、
まずYarnのレポジトリを有効化する。レポジトリのGPGキーをcurlコマンドを使って取得する。(debianはubuntuと互換性がある)
$ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
次にYarnのAPTパッケージレポジトリを自分のシステムに追加する。 teeコマンドを使って書き込み。
$ echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
などと記述されてたが、エラー出たのでガン無視して、aptでインストールしたため、
後からエラーが出るかもしれない。
(※3)EACCESS error対処

npm install 時のエラーらしいので下記で対処する。
$ mkdir ~/.npm-global
$ npm config set prefix '~/.npm-global'
$ echo ' export PATH=~/.npm-global/bin:$PATH' >> ~/.bash_profile
$ source ~/.bash_profile

(※4)vue -Vでインストールチェックしてインストールされてない
・VueCLIをインストール！ ❏Vue.js❏
手順通りやってもバグるので、他の記事に参照する。
npm install -g @vue/cli
vue/cli-initではなく、vue/cliにした。
通った。
(※5)Ubuntu上でVSCodeを動かす

  • sudo apt install curl
  • curl https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > microsoft.gpg
  • sudo install -o root -g root -m 644 microsoft.gpg /etc/apt/trusted.gpg.d/
  • sudo sh -c 'echo "deb [arch=amd64] https://packages.microsoft.com/repos/vscode stable main" > /etc/apt/sources.list.d/vscode.list'
  • sudo apt install apt-transport-https
  • sudo apt update
  • sudo apt install code
起動コマンド
~$ code
Linux用のWindowsサブシステムでVisual Studio Codeを使用するには、WindowsにVisual Studio Codeをインストールし、WSLのLinuxバージョンをアンインストールしてください。その後、通常のコマンドプロンプトと同じように、WSLターミナルで `code`コマンドを使用できます。
⇒あー、まじでうざいなー、本気でうざいなー。開発させる気ないだろこいつ。
（※5.2）Windows Subsystem for Linux で Visual Studio Code の使用を開始する
・拡張ツールのインストール

・Wget (web サーバーからコンテンツを取得するため) および ca 証明書を追加するには (SSL ベースのアプリケーションが SSL 接続の信頼性を確認できるようにするため)
sudo apt-get install wget ca-certificates
・WindowsのVSCodeにてctrl+shift+pの検索窓にて、
Remote wsl の new windowすると、Ubuntuとの接続が可能だ。


(※7)yarn をインストールしたのに There are no scenarios; must have at least one エラー
yarnをアンスコしてから再度インスコする
$ sudo apt remove cmdtest
$ sudo apt remove yarn
$ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
$ echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
$ sudo apt-get update && sudo apt-get install yarn
⇒_Ubuntu20.04とWSL1は競合するのであかんらしい。
WSL2は得策ではないので、npmでやることにする。
(※8)


■感想
本当に環境構築ってクソだわ。
エンジニア嫌いを作るよね。
公式準拠でやるとエラーが出る。出る。出まくる。
慣れてるし、そういうものという前提でやっているから大丈夫だけど。
Next Post Previous Post
No Comment
Add Comment
comment url