フリーランス 技術調査ブログ

フリーランス/エンジニア Ruby Python Nodejs Vuejs React Dockerなどの調査技術調査の備忘録

AWSのサーバー構築の手順の簡易メモ

はじめに

  • だいぶ前に1つのサーバーをGMOからAWSに移動したが、もう1台GMOにあるサーバーをAWSに移してみる。
  • だいぶ手順を忘れており、いきなりEC2を作成して何度もインスタンス作り直したので、忘れないように簡単に手順をまとめておく

手順

1.VPC作成

px-wing.hatenablog.com

2.サブネット作成

→ 1で作成したVPCに紐づける → パブリックとプライベートのサブネットを作成する

px-wing.hatenablog.com

3.インターネットゲートウェイ作成

→ 1で作成したVPCにアタッチする

4.ルートテーブルを作成

→ 1で作成したVPCにありあてる → サブネットの関連付けの設定で2で作成したサブネットを選択する。(パブリックのみ) → ルートの追加で「3で作成したインターネットゲートウェイ」を関連づける px-wing.hatenablog.com

5. EC2インスタンスを作成する

→ 1で作成したVPCやサブネットを指定する → セキュリティグループを作成する px-wing.hatenablog.com

6. ElasticIPアドレスを設定してIPアドレスを固定化する

px-wing.hatenablog.com

7. Route53でホストゾーンの作成をする

→ NSレコードをお名前.comに設定する → レコードの作成を行い、6で取得したElasticIPアドレスを指定する

px-wing.hatenablog.com px-wing.hatenablog.com

8.SESの設定

9. DBの設定

dockerのインストール手順

Docker インストール

https://docs.aws.amazon.com/ja_jp/AmazonECS/latest/developerguide/docker-basics.html

sudo yum update -y
sudo amazon-linux-extras install docker
sudo service docker start
sudo usermod -a -G docker ec2-user

docker-composeインストール

sudo curl -L https://github.com/docker/compose/releases/download/1.16.1/docker-compose-`uname -s`-`uname -m` -o /usr/local/bin/docker-compose
sudo chmod +x /usr/local/bin/docker-compose

感想

  • まだ完全に移行できていない。メールが意外と大変だ

nuxtjs/strapiでgraphqlのmutate(登録)を実行する

はじめに

  • 下記のページを参考に実装してみる

strapi.io

更新系クエリーの作成

  • queries/article-create.gqlファイルを作成し下記のように記述する
mutation createArticle($title: String, $details: String) {
  createArticle(input: { data: { title: $title, details: $details } }) {
    article {
      id
      title
      details
    }
  }
}

コード

<template>
  <div>
    <input v-model="title">
    <input v-model="details">
    <hr>
    <button @click="hogehoge">
      登録
    </button>
  </div>
</template>

<script>
import articleCreate from '@/queries/article-create'
export default {
  data () {
    return ({
      title: '',
      details: ''
    })
  },
  methods: {
    hogehoge () {
      this.$apollo.mutate({
        mutation: articleCreate,
        variables: {
          title: this.title,
          details: this.details
        }
      })
    }
  }
}
</script>

実行結果

  • 作成した画面のイメージ f:id:PX-WING:20210112171455p:plain
  • strapiに反映されていることが確認できる f:id:PX-WING:20210112171546p:plain

nuxtjs/strapiでgraphqlのqueryを実行する

はじめに

  •  下記のページを参考に実装してみる

strapi.io

インストール

yarn add @nuxtjs/apollo graphql

設定

  • nuxt.confg.jsファイルを下記のように記述する
   modules: [
    '@nuxtjs/apollo'
   ],
  apollo: {  
    clientConfigs: {
      default: {
        httpEndpoint: process.env.BACKEND_URL || "http://localhost:1337/graphql"
      }
    }

参照系クエリーの作成

  • queries/addresses.gqlファイルを作成して下記のように記述する
query getAddresses($postCode: String!) {
  addresses(where: { post_code: $postCode }) {
    id
    post_code
    prefectures
    city_name
    town_name
  }
}

呼び出し

  • pages/test.vueファイルに下記のように記述する
<template>
  <div>
    {{ addresses }}
    <hr>
    <input v-model="postCode">
    <hr>
    <button @click="hogehoge">
      検索
    </button>
  </div>
</template>

<script>
import addressesQuery from '@/queries/addresses'

export default {
  data () {
    return ({
      addresses: [],
      postCode: ''
    })
  },
  methods: {
    async hogehoge () {
      const addresses = await this.$apollo.queries.addresses.fetchMore({
        variables: {
          postCode: this.postCode
        },
        updateQuery: (previousResult, { fetchMoreResult }) => {
          if (fetchMoreResult.addresses.length > 0) {
            this.addresses = fetchMoreResult.addresses
          }
        }
      })
      console.log(addresses)
    }
  },
  apollo: {
    addresses: {
      query: addressesQuery,
      variables: {
        postCode: ''
      }
    }
  }
}
</script>

 実行結果

  • http://localhost/testにアクセスして、郵便番号を入力し検索ボタンをクリックするとデータを取得することができる f:id:PX-WING:20210112165855p:plain

strapiでgraphqlを利用する

参考URL

  • 下記のページを参考にstrapiでgraphqlを利用できるようにしてみる strapi.io

インストール

  • strapiのプロジェクトフォルダ内で下記のコマンドを実行して、graphqlのパッケージをインストールする
yarn strapi install graphql

動作確認

f:id:PX-WING:20210112083638p:plain

queryの仕様

単一の場合

  • 単一のレコードを取得する場合、idの指定が必須らしい
query {
  address(id: 1){ 
    id
    post_code
    prefectures
    city_name
    town_name
  }
  article(id: 1){
    id
    title
  }
}

複数のデータを取得し、かつWhere句で絞り込みしたい場合のクエリー

query getAddresses ($postCode: String!, $title: String!){
  addresses(where: { post_code: $postCode } ) {
    id
    post_code
    prefectures
    city_name
    town_name
  }
  articles(where: { title: $title }){
    id
    title
  }
}
  • query variablesの指定
{
  "postCode": "1010048",
  "title": "件名"
}

データ更新の場合

mutation {
  createArticle(input: { data: { title: "テスト", details: "詳細です"} }){
    article {
      id
      title
      details
    }    
  }
}

NativeScript-Vueで画面遷移する

はじめに

  • 前回、ローカルストレージに保存する処理を調べたので、次の画面に保存したデータを表示する方法を調べる

コード

  • components/HelloWorld.vueファイルを下記のように記述する
<template>
    <Page class="page">
        <ActionBar title="Local Data Storage" class="action-bar" />
        <ScrollView>
            <StackLayout class="home-panel form input-field">
                <!-- store/retrieve number -->
                <Label text="数値" class="heading" />
                <TextField v-model="num" hint="Enter a Number..."
                    class="input input-border" keyboardType="number" />
                <StackLayout orientation="horizontal"
                    horizontalAlignment="center">
                    <Button text="保存" @tap="saveNumber"
                        class="btn btn-primary" />
                    <Button text="削除" @tap="removeNumber"
                        class="btn btn-primary" />
                </StackLayout>

                <!-- store/retrieve string -->
                <Label text="文字列" class="heading" />
                <TextField v-model="str" hint="Enter a String..."
                    class="input input-border" />
                <StackLayout orientation="horizontal"
                    horizontalAlignment="center">
                    <Button text="保存" @tap="saveString"
                        class="btn btn-primary" />
                    <Button text="削除" @tap="removeString"
                        class="btn btn-primary" />
                </StackLayout>

                <!-- store/retrieve boolean -->
                <Label text="Boolean" class="heading" />
                <Switch v-model="bool" class="switch" />
                <StackLayout orientation="horizontal"
                    horizontalAlignment="center">
                    <Button text="保存" @tap="saveBoolean"
                        class="btn btn-primary" />
                    <Button text="削除" @tap="removeBoolean"
                        class="btn btn-primary" />
                </StackLayout>

                <StackLayout class="hr-light" />

                <Button text="全てのデータを削除する" @tap="removeAll"
                    class="btn btn-primary" />

                <Button text="次の画面へ" @tap="nextPage"
                    class="btn btn-primary" />

            </StackLayout>
        </ScrollView>
    </Page>
</template>

<script>
    import Test from "./Test";
    const appSettings = require("tns-core-modules/application-settings");
    const dialogs = require("tns-core-modules/ui/dialogs");
    export default {
        data() {
            return {
                num: null,
                str: "",
                bool: false
            };
        },
        created() {
            // second parameter is default value
            this.num = appSettings.getNumber("someNumber", null);
            this.str = appSettings.getString("someString", "");
            this.bool = appSettings.getBoolean("someBoolean", false);
        },

        methods: {
            saveNumber() {
                appSettings.setNumber("someNumber", parseFloat(this.num));
                dialogs.alert("You saved: " + appSettings.getNumber(
                    "someNumber"));
            },
            removeNumber() {
                appSettings.remove("someNumber");
                dialogs.alert("You removed the number from app settings!");
                this.num = null;
            },
            saveString() {
                appSettings.setString("someString", this.str);
                dialogs.alert("You saved: " + appSettings.getString(
                    "someString"));
            },
            removeString() {
                appSettings.remove("someString");
                dialogs.alert("You removed the string from app settings!");
                this.str = "";
            },
            saveBoolean() {
                appSettings.setBoolean("someBoolean", this.bool);
                dialogs.alert(
                    "You saved: " + appSettings.getBoolean("someBoolean")
                );
            },
            removeBoolean() {
                appSettings.remove("someBoolean");
                dialogs.alert("You removed the boolean from app settings!");
                this.bool = false;
            },
            removeAll() {
                appSettings.clear();
                dialogs.alert("All app settings values have been cleared!");
                this.num = null;
                this.str = "";
                this.bool = false;
            },
            nextPage() {
                dialogs.alert("Test");
                this.$showModal(Test, {
                    fullscreen: Test
                });
            }
        }
    };
</script>
  • components/Test.vueファイルを下記のように記述する
<template>
    <Page class="page">
        <ScrollView>
            <StackLayout class="home-panel form input-field">
                <TextField v-model="num" />
                <TextField v-model="str" />
                <TextField v-model="bool" />
            </StackLayout>
        </ScrollView>
    </Page>
</template>

<script>
    const appSettings = require("tns-core-modules/application-settings");
    export default {
        data() {
            return {
                num: null,
                str: "",
                bool: false
            };
        },
        created() {
            // second parameter is default value
            this.num = appSettings.getNumber("someNumber", null);
            this.str = appSettings.getString("someString", "");
            this.bool = appSettings.getBoolean("someBoolean", false);
        }
    };
</script>

<style>
</style>

nuxtjsでvuex-persistedstateを利用する

はじめに

  • ブラウザをリロードするとvuexのstoreのデータが削除されてしまうため、vuex-persistedstateを利用してみる。

インストール

yarn add vuex-persistedstate

github.com

保存先にセッションストレージを利用する場合

  • window.sessionStorageを指定することで明示的にセッションストレージを利用することを宣言する
  • pathsに指定する名前はstoreのnamespaceで指定された名前を指定する。またpathsに指定すると、指定したstoreのみが保存される
import createPersistedState from 'vuex-persistedstate'

export default ({ store }) => {
  createPersistedState({
    key: 'hogehoge',
    paths: [
       "dummystroe"
     ],
    storage: window.sessionStorage
  })(store)
}
  • storeの指定は下記ようにする
export default {
  namespace: true,
  state: () => (
    {
      dummystroe: {
        name: '',
        age: '',

window.onNuxtReadyについて

  • ストレージの読み込むタイミングでエラーが発生したらwindow.onNuxtReadyを利用して地縁ローディングさせる。
  • Nuxt.jsアプリケーションがロードされて準備ができた後にいくつかのスクリプトを実行したい場合は、window.onNuxtReady関数を使用できます。 ja.nuxtjs.org

NativeScript-Vueでローカルストレージを利用する

参考ページ

docs.nativescript.org

docs.nativescript.org

コード

<template>
    <Page class="page">
        <ActionBar title="Local Data Storage" class="action-bar" />
        <ScrollView>
            <StackLayout class="home-panel form input-field">
                <!-- store/retrieve number -->
                <Label text="数値" class="heading" />
                <TextField v-model="num" hint="Enter a Number..."
                    class="input input-border" keyboardType="number" />
                <StackLayout orientation="horizontal"
                    horizontalAlignment="center">
                    <Button text="保存" @tap="saveNumber"
                        class="btn btn-primary" />
                    <Button text="削除" @tap="removeNumber"
                        class="btn btn-primary" />
                </StackLayout>

                <!-- store/retrieve string -->
                <Label text="文字列" class="heading" />
                <TextField v-model="str" hint="Enter a String..."
                    class="input input-border" />
                <StackLayout orientation="horizontal"
                    horizontalAlignment="center">
                    <Button text="保存" @tap="saveString"
                        class="btn btn-primary" />
                    <Button text="削除" @tap="removeString"
                        class="btn btn-primary" />
                </StackLayout>

                <!-- store/retrieve boolean -->
                <Label text="Boolean" class="heading" />
                <Switch v-model="bool" class="switch" />
                <StackLayout orientation="horizontal"
                    horizontalAlignment="center">
                    <Button text="保存" @tap="saveBoolean"
                        class="btn btn-primary" />
                    <Button text="削除" @tap="removeBoolean"
                        class="btn btn-primary" />
                </StackLayout>

                <StackLayout class="hr-light" />

                <Button text="全てのデータを削除する" @tap="removeAll"
                    class="btn btn-primary" />
            </StackLayout>
        </ScrollView>
    </Page>
</template>

<script>
    import Test from "./Test";
    const appSettings = require("tns-core-modules/application-settings");
    const dialogs = require("tns-core-modules/ui/dialogs");
    export default {
        data() {
            return {
                num: null,
                str: "",
                bool: false
            };
        },
        created() {
            // second parameter is default value
            this.num = appSettings.getNumber("someNumber", null);
            this.str = appSettings.getString("someString", "");
            this.bool = appSettings.getBoolean("someBoolean", false);
        },

        methods: {
            saveNumber() {
                appSettings.setNumber("someNumber", parseFloat(this.num));
                dialogs.alert("You saved: " + appSettings.getNumber(
                    "someNumber"));
            },
            removeNumber() {
                appSettings.remove("someNumber");
                dialogs.alert("You removed the number from app settings!");
                this.num = null;
            },
            saveString() {
                appSettings.setString("someString", this.str);
                dialogs.alert("You saved: " + appSettings.getString(
                    "someString"));
            },
            removeString() {
                appSettings.remove("someString");
                dialogs.alert("You removed the string from app settings!");
                this.str = "";
            },
            saveBoolean() {
                appSettings.setBoolean("someBoolean", this.bool);
                dialogs.alert(
                    "You saved: " + appSettings.getBoolean("someBoolean")
                );
            },
            removeBoolean() {
                appSettings.remove("someBoolean");
                dialogs.alert("You removed the boolean from app settings!");
                this.bool = false;
            },
            removeAll() {
                appSettings.clear();
                dialogs.alert("All app settings values have been cleared!");
                this.num = null;
                this.str = "";
                this.bool = false;
            },
        }
    };
</script>

画面イメージ