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

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

dockerでdynamodb環境を構築する

はじめに

docker-compose.ymlの設定

  • 下記のdocker-compose.yamlファイルを用意して,docker-compose buildを実行する
version: "3.8"
services:
  dynamodb-local:
    command: "-jar DynamoDBLocal.jar -sharedDb -optimizeDbBeforeStartup -dbPath ./data"
    image: "amazon/dynamodb-local:latest"
    container_name: dynamodb-local
    ports:
      - "8000:8000"
    volumes:
      - "./docker/dynamodb:/home/dynamodblocal/data"
    working_dir: /home/dynamodblocal
  app:
    image: "node:lts-alpine"
    working_dir: /opt/app/
    volumes:
      - ./app:/opt/app/
    ports:
      - "8001:8001"
    tty: true

シェル画面へのアクセス

  • docker-compose up -dhttp://localhost:8000/shell/にアクセスするとjavascriptでdynamodbを操作する事ができるshell機能にアクセスする事ができる

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

シェルに慣れていない場合

  • dynamodb-adminを利用してGUIベースでテーブルの作成とデータの登録ができる www.npmjs.com

インストール

npm install dynamodb-admin

dynamodb adminの起動方法

  • http://dynamodb-local:8000dynamodb-localはdockerのコンテナ名を指定します
DYNAMO_ENDPOINT=http://dynamodb-local:8000 ./node_modules/dynamodb-admin/bin/dynamodb-admin.js 

dynamodb adminの画面

  • dyanamodbをGUIから操作するインターフェースが提供されるので便利 f:id:PX-WING:20210412233451p:plain

prisma.jsで覚えたメモ

はじめに

Viewテーブルをprisma.jsから利用する方法

  • 下記のようなviewテーブルを作成した場合
create view productlist as 
  select id, 
              name 
   from product;
  • npx prisma introspectコマンドを実行しても定義が出力されないのでprisma/schema.prismaファイルに手動でviewテーブルの定義を追加する
model productlist {
   id       Int @unique
   name String @db.VarChar(255)

   @@map("productlist")
}

※Viewテーブルの場合、特にユニーク制約などはつくなくて良いのですが、指定しないでnpx prisma generateを実行するとエラーになるため、idフィールドに@uniqueを指定するようにしている。

error: Error validating model "productlist": Each model must have at least one unique criteria that has only required fields. Either mark a single field with `@id`, `@unique` or add a multi field criterion with `@@id([])` or `@@unique([])` to the model.
  • 下記のコマンドを実行するとviewテーブルのモデルを利用する事ができる。
 npx prisma generate

検索フォームの条件によってwhereの条件を変えたい

  • 下記のように検索フォームの条件が何もなかった場合、undefinedを指定すると検索条件とみなされずにselect * from productlistで実行される
const conversions = await prisma.productlist.findMany({
  where: {
    name: {
      contains: searchName ? searchName : undefined,
    },
 }}
)

実行されるモデルのSQLを確認する方法

  • PrismaClientにlog: ['query']を指定するとconsole.logにSQLが表示される
const prisma = new PrismaClient({log: ['query']})

www.prisma.io

約11ヶ月続けたブログ更新をやめるて、不定期更新にする

約11ヶ月毎日ブログを更新していた。

  • 2020年4月30日から2021年3月30 日までブログを毎日更新していました。下記のついtwilogのログとなります。 f:id:PX-WING:20210331235240p:plain

ブログの更新をしていてよかった事

  • 毎日、インプット・アウトプットする習慣化する事ができた。
  • フロント周りの技術をした事がなかったが、ReactやVuejsを触れる機会ができて仕事にも役にたった。
  • サーバーをGMOレンタルサーバーからAWSに移行する事ができた。dockerでいろんな環境を作ったので、dockerをそこそこ覚える事ができた。
  • pythonやkotolinなども少し触ってみた

今思うといいことしかなかったと思ってます。

なぜ毎日更新をやめるのか

  • 勉強する習慣化ができたので、今度はこのブログ更新の習慣を個人開発に向けたいと思ってます。せっかく勉強した知識を使わないと意味がないのと、実戦で得られる知識は、また大きいと思うので。

※でも月に数回はブログを更新していきたいと思ってます。

vue-selectをnuxtjsに適用する

はじめに

  • 下記のライブラリをインストールする github.com

インストール

npm install vue-select

設定

  • plugins/vue-select.jsファイルを作成する
import Vue from "vue";
import vSelect from "vue-select";

Vue.component("v-select", vSelect);
  • nuxt.config.jsファイルのpluginsに下記の記述を追加する
  plugins: ['@plugins/vue-select'],

組み込み

  • pages/index.vueファイルに下記の記述を追加する
<template>
<v-select id="vselect" v-model="selected" placeholder="Select Category" :options="options"></v-select>
</template>

<script>
import "vue-select/dist/vue-select.css";

export default {
  middleware: 'privatepage',
  data: () => ({
    selected: '',
    options: ["Hoge","Geho","HogeHoge"],
  }),
(省略)
<script>

strapiの管理画面の編集する方法

参考にしたページ

strapi.io

github.com

github.com

strapiの管理画面のレイアウトを変更するための準備

  1. node_modules/strapi-admin/admin/src/内の中身をadmin/src内に移動する
  2. node_modules/strapi-plugin-content-manager/admin/src/内の中身をextensions/content-manager/admin/src内に移動する

admin/src内及びextensions/content-manager/admin/src内のファイルを修正した場合、画面に反映させる

  1. yarn buildで変更した内容が反映される。

※ hotrelaodしたい場合、「yarn develop --watch-admin」で起動するとできるらしいが、自分の環境ではhotreadしてくれなかった・・・。

困ったとき

  • strapiのコミュニティがあるので、そこでhelpチャンネルがあり、そこで質問することができる。 strapi.slack.com

expressでjsonwebtokenを利用する

インストール

$ npm install --save jsonwebtoken
$ npm install --save @types/jsonwebtoken

コード

import * as jwt from 'jsonwebtoken'

interface jwtPayload {
  email: string;
  name: string;
}

const jwtPayload: jwtPayload = {
  email: 'yamada.tarou@example.com',
  name: 'Yamada Taro,
};
const token = jwt.sign(jwtPayload, 'secret');
console.log(token)

dockerを使ってexpressを動かしてみる

docker-comsepose

  • ファイルを作成する
version: '3'
services:
  express:
    image: node:14.15.1-alpine
    container_name: express
    ports:
      - '3000:3000'
    volumes:
      - ./express:/opt/express/
    tty: true

docker-build

docker-compose build

初期化

  • npm initコマンドを実行する
# npm init
{
  "name": "express",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

dockerにログインして作業する

  • docker ログイン
docker exec -it express ash
  • expressをインストールする
# npm install express --save

- 下記のエラーが発生する

npm ERR! code ENOSELF
npm ERR! Refusing to install package with name "express" under a package
npm ERR! also called "express". Did you name your project the same
npm ERR! as the dependency you're installing?
npm ERR! 
npm ERR! For more information, see:
npm ERR!     <https://docs.npmjs.com/cli/install#limitations-of-npms-install-algorithm>

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2021-03-25T23_04_42_464Z-debug.log
  • package.jsonのnameをexpressから違う名前に変更する
{
  "name": "demo",
  (※※ 省略 ※※)
}  
  • 再度インストールするとインストールすることができる
# npm install express --save
  • pegをインストールする
npm install pug
  • views/index.pugファイルを作成する
html
  head
    title= title
  body
    h1= message
  • app.jpファイルを作成する
const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.render('index', { title: 'Hey', message: 'Hello there!' })
})

app.set('view engine', 'pug')

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

サーバー起動

node app.js