dockerでmysqlにリストア

dockerコンテナにダンプファイルをコピー

docker cp dump.sql コンテナ名:/tmp/dump.sql

コンテナに接続する

docker exec -it コンテナ名 bash 

権限を変更

chmod 400 ./tmp/dump.sql

リストア

mysql -u root -proot -D テーブル名 < ./tmp/dump.sql

bitbucket Webhooksでvueプロジェクトのデプロイとビルドを自動化

Webhooksを設定

Bitbucketリポジトリの

Settings > Webhooks 

に遷移

Add webook をクリック

titleとリクエスト先URLを入力

Triggers  > Repository push にチェックが入っているのを確認。リポジトリプッシュがトリガーになって入力したURLにリクエストを送られる。

Webhooksのリクエスト先を作成

webhooksのリクエスト先のdeploy.jsを作成
 
webhooksがリクエストすると、任意のディレクトリ(vue-project)でmasterをプルしてきて、yarn buildを実行


const http = require("http");
const url = require("url");
const util = require("util");
const childProcess = require("child_process");
const exec = util.promisify(childProcess.exec); //child_processをprmoise化

const pullMaster = async () => {
  const cmd_pull = `cd ${__dirname}/vue-project && git checkout master && git pull origin master`;
  return await exec(cmd_pull, { timeout: 90000 }, (error, stdout, stderr) => {
    if (error !== null) {
      console.log("exec error: " + error);
    }
  });
};

const build = async () => {
  await exec(`cd ${__dirname}/vue-project && yarn build`);
};

const pullAndBuild = async () => {
  await pullMaster();
  await build();
};

http
  .createServer((req, res) => {
    if (
      req.method == "POST"
    ) {
      pullAndBuild();
    }
  })
  .listen(3000);

Node.js 更新したデータを定期的にGitにバックアップする

お題

cmsで作られた様々なjsonデータや画像データを毎日バックアップする

cmsをNode.jsで実装していたので、サクッとNode.jsだけで簡単に終わらせたい。検討した方法は2つ

  1. zipしてGoogle driveに保存
  2. gitにプッシュ

1.zipしてGoogle driveに保存

node.jsでzipできるarchiverを入れる

yarn add archiver
const archiver = require("archiver");
const fs = require("fs");

const date = new Date();
//日付からファイル名を作成
const file_name = `${date.getFullYear()}${date.getMonth()}${date.getDate()}.zip`;

//ファイル
const output = fs.createWriteStream(`./archives/${file_name}.zip`);

//アーカイブ
const archive = archiver("zip", {
    zlib: { level: 5 } //圧縮レベル
});

//完了のコールバック
output.on("close", function() {
  var archive_size = archive.pointer();
  console.log(
    `complete! total size : ${archive_size} bytes(${config.upload_path})`
  );
});

//実行
archive.pipe(output);
archive.directory("./data", false);
archive.glob(`./data/**/*`);
archive.finalize();

ただこの後Google Driveにファイルを保存する方法を調べててちょっと面倒臭くなったのと、毎回丸ごと保存するのは容量食うし良くないなと、あとあまりサクッと感がないなと思って、この1番は却下。

2.gitにプッシュ

そもそもソースコードはbitbucketで管理しているので、新しいリポジトリ作ってそこに定期的にプッシュしていけば簡単なことに気づいた。保存されるのは差分だけだし、ロールバックも楽だし。

simple-gitを入れる

yarn add simple-git

./dataディレクトリの中に新しいリポジトリを作成。サブツリーでもOKだけど、.gitignoreしているディレクトリに普通に作ってしまったので、そのまま。

cd ./data
git init
git remote add origin xxx.git
git pull origin master

nodeからgitの操作をできるsimple-gitを入れる

yarn add simple-git

git_commit_and_push.js

const simpleGit = require("simple-git")("./data");
const git_commit_and_push = ()  =>{
  const date = new Date();
  const commit_log = `${date.getFullYear()}${date.getMonth()}${date.getDate()}`;
  simpleGit
    .add("./")
    .commit(`${commit_log}`)
    .push("origin", "master");
}
export module = { git_commit_and_push }

これだけ

node-cronとforeverで定期実行&永続化

永続化=forever、定期実行=node-cronを入れる

yarn global add forever
yarn add node-cron

commit_everyday.js

const cron = require("node-cron");
const { git_commit_and_push } from "./git_commit_and_push";
//毎日4時にコミット
cron.schedule("0 0 4 * * *", () => {
  git_commit_and_push();
});

foreverで永続化

forever start commit_everyday.js

次のイベントループで関数を実行するいくつかの方法

vue.jsだと、vue.nextTickでできる


this.$nextTick(()=>{
  ...
});

Javascriptでよく使われるのはsetTimeout


setTimeout(()=>{
  ...
},0)

Promiseでもできる


Promise.resolve().then(() => {
  ...
});

ちょっと違うけど、ReactだとsetStateで関数を実行することで、上記の代替になるかも


setState(()=>{
 ...
})

Node.js jsonファイルの読み込み方

node.jsでjsonファイルの読み込む方法を2つメモ

1.直接requireで読み込み


const json = require('../hoge.json');

この方法だと初回に1度読み込むだけなので、頻繁にjsonを書き換える場合は更新が反映されない。定数や設定ファイルに向いてる。

2.fsで読み込む


let json = JSON.parse(
fs.readFileSync(`${full_path}/hoge.json`, 'utf8')
);

この方法で関数の中で都度読み込んであげると、頻繁に書き込むするjsonも反映される

3.requestモジュールを使う

外部のサーバからGETでjsonを取ってくるときとかに使います。
yarn add request でモジュールを追加

const request = require("request");
request.get(
{
url:'https://xxx.com/api',
qs: {
key:'12345'
}
},
(error, response, body) => {
console.log(body);
}
);

vueでモバイル判定をする

ユーザーエージェントで判定

isMobile.js

ライブラリを追加

yarn add ismobilejs

テンプレートで出し分けしたい場合


  <template>
    <div v-if="isMobile.phone">
      <div>モバイルで表示</div>
    </div>
  </template>
  import isMobile from "ismobilejs";
  export default {
    data:()=>{
      isMobile
    }
  }

レスポンシブで判定

vue-mq

ライブラリを追加

yarn add vue-mq

テンプレートで出し分けしたい場合


  <template>
    <div v-if="$mq==='sp'">
      <div>モバイルで表示</div>
    </div>
  </template>
  <script>
  import Vue from "vue";
  import VueMq from "vue-mq";

  const breakpoints = {
    sp: 400,
    pc: 1024
  };
  Vue.use(VueMq, { breakpoints });
  </script>

create-react-app でreact-styleguidist をつかってReactコンポーネントのスタイルガイドを作成する

先日スタートアップカフェコザで行ったセッション(コンポーネント指向UI開発で学ぶReact入門 沖縄フロントエンド塾 in スタートアップカフェコザ)で紹介したReactコンポーネントのスタイルガイドの作成を記載します。
ボタンのコンポーネントを作成してスタイルガイドで表示するまでの手順です。

プロジェクトの作成

プロジェクトを作成

create-react-app ui-react

ui-reactフォルダに移動
styleguidistとnode-sassを入れます

yarn add react-styleguidist

package.json

scriptsに追記


"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "styleguide": "styleguidist server"//これを追加
  }

ボタンのコンポーネントの作成

src/components/atoms/btn/
でフォルダを作成して、


Btn.jsx
Btn.scss
Btn.md

のファイルを作成

ボタンのjsx作成


import React from 'react';
import './Btn.scss';
export const Btn =(props)=>{
  return(
    <div 
      className='btn'
      onClick={(e)=>{this.props.handleClick(e)}}
    >
      {props.children}
    </div>
  )
}

ボタンのscss作成


@mixin btn {
  border-radius:4px;
  padding:4px;
  font-sie:12px;
  text-align:center;
  &:hover {
    cursor:pointer;
    font-weight:bold;
  }
}

.btn {
  @include btn;
}

ボタンのmd作成

このファイルにスタイルガイドに表示するものを記述
いろいろ設定できます(Documenting components)


```jsx
<Btn handleClick={}>.btn</Btn>
```

スタイルガイド作成


yarn styleguide

コンパイルすると、


yarn run v1.7.0
$ styleguidist server
Loading webpack config from:
D:\work\FrontendJ\react-styleguidist\node_modules\react-scripts\config\webpack.config.dev.js

You can now view your style guide in the browser:

  Local:            http://localhost:6060/
  On your network:  http://172.24.138.209:6060/

 DONE  Compiled successfully!

 
 


http://localhost:6060/

このurlを開くと表示されます。
 
 

 
 

気をつけること

  • 1つの.jsxに1つのコンポーネント

HerokuでSendgridのアドオンを設定するのにハマったので備忘録

  • SendGridのアドオンを追加するにはクレジットカード登録が必要
  • 環境変数のSENDGRID_NAME、SENDGRID_PASSWORDを先に設定しない
  • 先にSENDGRID_API_KEYを設定する

SendGridアドオン設定手順

  1. まずSendGridでAPIキーを作成、コピーする
  2. Heroku管理画面で、Settings > Config Vars で 環境設定のSENDGRID_API_KEYにさきほどコピーしたAPIキーを登録する
  3. Heroku管理画面で、Resources > Add-onsにSendgridを入力して一覧に表示された選択する
  4. Provisionのポップアップができるので、Provisionを押す
  5. 完了する

この時点でSENDGRID_NAME、SENDGRID_PASSWORDが設定されている