JavaScriptのデータ保存方法(Cookie、SessionStorage、LocalStorage)

データ保存方法の違い

比較項目CookieSessionStorageLocalStorage
容量4KB5〜10MB(ブラウザ、環境依存)5〜10MB(ブラウザ、環境依存)
保存期限期間など独自に設定可能タブを閉じるまで永続的に保持、ブラウザアプリのアンインストールなどで消える
保存場所ローカルのブラウザアプリ内及び、サーバーローカルのブラウザアプリ内ローカルのブラウザアプリ内
HTTPリクエストの送信有無
アクセス制御別タブ、別ウィンドウからのアクセス可能同一のタブからのみアクセス可能別タブ、別ウィンドウからのアクセス可能

Cookie

値の保存

document.cookie = "key=値";

値の取得

function getCookie(key) {
  var cookies = document.cookie;
  var cookiesArray = cookies.split(';');

  var result = "";
  cookiesArray.map((item) => {
    var cArray = item.split('=');
    if (cArray[0] == key) {
      result = cArray;
    }
  });
  return result;
}

getCookie('key');

有効期限設定

const second = 600 // 600秒
document.cookie = "key=値" + ";max-age=" + second;

SessionStorage

値の保存

sessionStorage.setItem('key','値');

値の取得

sessionStorage.getItem('key');

値の削除

sessionStorage.removeItem('key');

全データの削除

sessionStorage.clear();

LocalStorage

値の保存

localStorage.setItem('key','値');

値の取得

localStorage.getItem('key');

値の削除

localStorage.removeItem('key');

全データの削除

localStorage.clear();

Node.jsのCORSエラーの回避方法

はじめに

CORSとは、「Cross Origin Resource Sharing」の略です。

このエラーは、異なるドメインからアクセスされた際に発生します。

つまり、localhostで実行しているWEBアプリから、サーバーにデプロイされているRestAPIを実行する時などで発生します。

例)「http://aaa.com/」のWebから「http://bbb.com/」のNode.jsを実行する。

ここでは、CORSエラーが発生しないようにする手順を記載します。(ライブラリは使用しません。)

手順

express-generatorでプロジェクトが作成されている前提で記載します。

「app.js」の「app.use」が並んでいるところに、以下を追加します。

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  res.header("Access-Control-Allow-Methods", "GET, POST, OPTIONS, PUT, DELETE");
  next();
});

たったこれだけです。

あとは、サーバーを再起動して確認してください。

一応、以下に「app.js」の全量を載せておきます。(ほぼ自動生成ですが。)

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  res.header("Access-Control-Allow-Methods", "GET, POST, OPTIONS, PUT, DELETE");
  next();
});

app.use('/', indexRouter);
app.use('/users', usersRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

Reactでaxiosを使用したAPI通信

はじめに

実際にシステムを作る際には、RestAPIの実行は必須と言って良いほど、使用します。

ここでは、「axios」を使用したRestAPIの実行方法を記載します。

手順

axiosをインストールするために、以下のコマンドを実行する

npm i axios

App.jsのソースコードの全量は以下。

import React from 'react';
import axios from 'axios';

class App extends React.Component{
  render()
  {
    function btnGetClick() {
      const data = { param : 'aa', paramtwo : 'aa' };
      axios.get('https://hogehoge.com/hoge', {params: data})
      .then((res) => {
          console.log(res);
      })
      .catch(console.error);
    }
    function btnPostClick() {
      const data = { param : 'aa', paramtwo : 'aa' };
      axios.post('https://hogehoge.com/hoge', data)
      .then((res) => {
          console.log(res);
      })
      .catch(console.error);
    }
    return (
      <div>
        <h1>Hello World</h1>
        <button onClick={btnGetClick}>GET通信</button>
        <button onClick={btnPostClick}>POST通信</button>
      </div>
    );
  }
}

export default App;

以下でaxiosのインポートをしています。

import axios from 'axios';

「btnGetClick」「btnPostClick」でそれぞれ、リクエストパラメータありのAPIの実行処理を書いています。

違いは、呼び出している関数が「get」「post」なのと、第二引数(パラメータ)の指定方法です。

「get」は以下のように、「{params: [パラメータ]}」というような書き方をする必要があります。

const data = { param : 'aa', paramtwo : 'aa' };
axios.get('https://hogehoge.com/hoge', {params: data})
  .then((res) => {
    console.log(res);
  })
  .catch(console.error);

express-generatorで作成したNode.jsプロジェクトをHTTPSで起動する方法

はじめに

express-generatorを使用して作成したNode.jsプロジェクトを作成しておいてください。

手順

express-generatorで生成されたプロジェクトの「bin」配下の「www」を以下に書き換えます。

#!/usr/bin/env node

serverStart();
sslServerStart();

/**
 * 通常(HTTP)のサーバー起動
 */
function serverStart() {
  var app = require('../app');
  var http = require('http');
  var port = normalizePort(process.env.PORT || '3000');
  app.set('port', port);
  var server = http.createServer(app);
  server.listen(port);
  server.on('error', onError);
  console.log("ポート「" + port + "」でHTTPサーバーを起動しました");
}

/**
 * SSL(HTTPS)のサーバー起動
 */
function sslServerStart() {
  var app = require('../app');
  var https = require('https');
  var fs = require('fs');
  var options = {
      key: fs.readFileSync("[秘密鍵]"),
      cert: fs.readFileSync("[証明書]"),
      ca: fs.readFileSync("[SSLサーバー証明書]")
  };
  
  var port = normalizePort(process.env.SSL_PORT || '4000');
  app.set('port', port);
  var serverS = https.createServer(options, app);
  serverS.listen(port);
  serverS.on('error', onError);
  console.log("ポート「" + port + "」でHTTPSサーバーを起動しました");
}

/**
 * ポートのバリデーションチェックして正しいポートを設定する
 * @param val 
 */
function normalizePort(val) {
  var port = parseInt(val, 10);

  if (isNaN(port)) {
    return val;
  }

  if (port >= 0) {
    return port;
  }

  return false;
}

/**
 * エラー発生時のハンドリング
 * @param error 
 */
function onError(error) {
  if (error.syscall !== 'listen') {
    throw error;
  }

  var bind = typeof port === 'string'
    ? 'Pipe ' + port
    : 'Port ' + port;

  // handle specific listen errors with friendly messages
  switch (error.code) {
    case 'EACCES':
      console.error(bind + ' requires elevated privileges');
      process.exit(1);
      break;
    case 'EADDRINUSE':
      console.error(bind + ' is already in use');
      process.exit(1);
      break;
    default:
      throw error;
  }
}

「[秘密鍵]」と「[証明書]」と「[SSLサーバー証明書]」の部分は各環境に書き換えてください。

ちなみに、Let’s Encryptで取得した証明書の場合は以下のように記載できます。

※「example.com」のドメインの場合

var options = {
    key: fs.readFileSync("/etc/letsencrypt/live/example.com/privkey.pem"),
    cert: fs.readFileSync("/etc/letsencrypt/live/example.com/cert.pem"),
    ca: fs.readFileSync("/etc/letsencrypt/live/example.com/chain.pem")
};

HTTPSのポートを指定する方法

package.jsonの「scripts」を以下のように記載することで、HTTPとHTTPSのそれぞれのポートを指定できます。

"scripts": {
  "start": "PORT=1234 SSL_PORT=5678 node ./bin/www"
},

「PORT」がHTTPのポートで「SSL_PORT」がHTTPSのポートです。

PM2のアプリ起動、自動起動、よく使うコマンド集

PM2でNodeアプリを起動

1.以下のコマンドを実行して、PM2をグローバルにインストールする。

$ npm install -g pm2

2.以下のコマンドを実行して、アプリケーションを起動する。(「[アプリ名]」の箇所には自由にアプリ名を入力してください。PM2の管理で使用するアプリ名となります。)

$ pm2 start npm --name [アプリ名] -- start

起動したNodeアプリをサーバー再起動後にPM2で自動起動

1.以下のコマンドを実行しPM2のプロセスに起動されていることを確認する。

$ pm2 list

2.以下のコマンドを実行し、自動起動スクリプトを作成する。

$ pm2 startup

3.以下のコマンドを実行し、現在のPM2の状態を保存する。

$ pm2 save

4.サーバーを再起動し、以下のコマンド実行結果が「1」と同じであることを確認する。

$ pm2 list

PM2コマンド集

概要コマンド
PM2でアプリ起動pm2 start npm –name [アプリ名] — start
PM2の起動アプリ一覧表示pm2 list
PM2で起動中の特定アプリの停止pm2 stop [プロセスID]
PM2で起動中の全てのアプリ停止pm2 stop all
PM2で起動中の特定アプリの再起動pm2 restart [プロセスID]
PM2で起動中の全てのアプリ再起動pm2 restart all
PM2の自動起動スクリプトの作成pm2 startup
PM2の自動起動スクリプトに現在のPM2の状態を保存pm2 save

さくらVPSでドメイン取得、設定方法

■はじめに

本記事は、さくらVPSの利用方法がある程度わかっている前提で記載しています。

また、さくらVPSを契約している方を対象としています。

■ドメインの設定

1.さくらVPSコンソール(以降、コンソール)を開く。

2.コンソールの左のメニューから、「ドメイン取得・転入」を押下する。

3.欲しいドメインを入力して、「検索」ボタンを押下する。

4.取得したいドメインの「申し込む」ボタンを押下する。(このボタンがない場合には、他者が既に取得している為、別ドメインを使用する必要があります。

5.以降、画面の手順にしたがって、支払情報などを記載する。

6.ドメインが取得できたら、以下のリンク先にアクセスする。

https://secure.sakura.ad.jp/menu/domain/

7.取得したドメインが「利用中」になるまで、数時間〜48時間かかるようなので、それまで待機する。

8.利用中になったら「ゾーン編集」を押下する。

9.「さくらインターネットのネームサーバに設定する(簡単設定)」に設定したいIPアドレスを入力して、「送信する」を押下する。

10.エントリ名「@」のタイプ「A」にIPが設定されていればOKです。

サーバーへSSHで接続し以下のコマンドを実行する。(Apacheの場合)

vi /etc/httpd/conf.d/vhost.conf

編集モードに変更し、以下をコピペする。

※「domain-name.com」はそれぞれのドメインに変更する。

NameVirtualHost *:80

<VirtualHost *:80>
  DocumentRoot /var/www/html
  ServerName domain-name.com
</VirtualHost>

よく使う、ファイアーウォールのコマンド集

概要コマンド
ファイアーウォール の起動systemctl start firewalld
ファイアーウォール の自動起動systemctl enable firewalld
ファイアーウォール の再起動systemctl restart firewalld
ファイアーウォール の停止systemctl stop firewalld
ファイアーウォール の穴あけ(ポート開放※「1234」の場合)firewall-cmd –add-port=1234/tcp –permanent
ファイアーウォール の穴あけ(HTTP開放)firewall-cmd –add-service=http –zone=public –permanent
ファイアーウォール の穴あけ(HTTPS開放)firewall-cmd –add-service=https –zone=public –permanent
ファイアーウォール 穴あけ後の再読み込みfirewall-cmd –reload
ファイアーウォール の開通確認firewall-cmd –list-all

CentOS7で「.htaccess」の有効化する方法

はじめに

Apacheを使用していると、様々な場面で「.htaccess」を利用したい場面がでてきます。

ここでは、「.htaccess」を使用するまでの手順を記載します。

※サーバーの用意や、Apacheのインストールは行っている事を前提とします。

手順

以下のコマンドを実行し、「httpd.conf」を編集する。

$ vi /etc/httpd/conf/httpd.conf

以下のコマンドを実行し、「AllowOverride」を探します。(100行目付近にあります。)

$ /AllowOverride

「None」を「All」に変更します。

【変更前】

<Directory />
    AllowOverride None
    Require all denied
</Directory>

【変更後】

<Directory />
  AllowOverride All
  Require all denied
</Directory>

これで、「.htaccess」の有効化は完了しました。

「/var/www/html」配下に「.htaccess」を作成して利用してください。

※ルートのパスを変更している方は、ルートのパスに作成してください。

動作確認

「.htaccess」が本当に利用できるか確認したい場合は、以下を記載してください。

Redirect /google/ http://www.google.com

これで、以下のURLにアクセスする事で、Googleのサイトに遷移すれば、「.htaccess」が正常に動作していることが確認できます。

【URL】
http://[ドメイン名]/google/

【例】
http://example.com/google/

MySQLのアカウント作成方法

はじめに

プロジェクト毎、環境毎などDBを分けることはよくあると思います。
当然、全てrootで操作するとセキュリティ上よくないです。
ここでは、アカウントを作成し、DBの操作権限を付与する部分を記載します。

手順

rootユーザーでMySQLに入ってください。

mysql -u root -p

以下のSQL文を実行し、ユーザーを作成する。

CREATE USER '[ユーザー名]'@'localhost' IDENTIFIED BY '[パスワード]';

以下のSQL文を実行し、ユーザーが操作できるテーブルを追加する。

GRANT ALL PRIVILEGES ON [db名].* TO '[ユーザー名]'@'localhost';

以下のSQL文を実行し、変更を反映させる。

FLUSH PRIVILEGES;

これで、アカウント作成とDBの設定ができました。

ユーザーのパスワードを変更する方法

以下のSQL文を実行し、パスワードを変更し、変更を反映する。

ALTER USER '[ユーザー名]'@'localhost' IDENTIFIED WITH mysql_native_password BY '[パスワード]';
FLUSH PRIVILEGES;

Let’s Encryptを使用して無料のSSL証明書を設定し、自動でSSL証明書を更新させる方法

はじめに

無料のSSL証明書を設定するにあたり、ドメインを設定しておく必要があります。

CentOSにApatchの設定などが終わっており、http通信ができる前提です。

手順

SSHでサーバーに接続する(rootユーザーに切り替えてください)

以下のコマンドでファイアーウォール にhttpsが空いていることを確認する。(「services」の部分に「https」があればOK)

firewall-cmd --list-all

以下のコマンドで無料SSLのインストールをする。

yum install certbot python2-certbot-apache

以下のコマンドでドメインに無料SSLを反映する。(以下は「example.com」の例です。)

certbot --apache -d example.com

色々質問されるので、それぞれ回答していく。(以下は私が実施した際の質問です。)

Enter email address (used for urgent renewal and security notices) (Enter 'c' to
cancel):
  →メールアドレスを入力する。

-------------------------------------------------------------------------------
Please read the Terms of Service at
https://letsencrypt.org/documents/LE-SA-v1.1.1-August-1-2016.pdf. You must agree
in order to register with the ACME server at
https://acme-v01.api.letsencrypt.org/directory
-------------------------------------------------------------------------------
(A)gree/(C)ancel:
  →A(利用規約に同意する)

-------------------------------------------------------------------------------
Would you be willing to share your email address with the Electronic Frontier
Foundation, a founding partner of the Let's Encrypt project and the non-profit
organization that develops Certbot? We'd like to send you email about EFF and
our work to encrypt the web, protect its users and defend digital rights.
-------------------------------------------------------------------------------
(Y)es/(N)o:
  →Y(SSL証明書発行元にメールアドレスを公開する)

-------------------------------------------------------------------------------
1: Easy - Allow both HTTP and HTTPS access to these sites
2: Secure - Make all requests redirect to secure HTTPS access
-------------------------------------------------------------------------------
Select the appropriate number [1-2] then [enter] (press 'c' to cancel):
  →2(httpへのアクセスをhttpsにリダイレクトする)

これで、SSLの証明書は設定できたので、以下のコマンドでhttpdを再起動する。

systemctl restart httpd

ブラウザで以下のURLでアクセスしてみてください。(以下はexample.comの場合です。自身のドメインに書き換えてください)

https://example.com

無料SSLの更新

無料のSSL証明書は3ヶ月で期限が切れます。

いちいち手動で更新させるのはめんどくさいので、自動で更新する方法を記載します。

以下のコマンドを実行し、cronを起動します。

crontab -u root -e

cronに以下を設定します。

0 0 * * * /usr/bin/certbot renew

これで、毎日0時に証明書を確認し、更新できる場合には自動で更新されるようになります。(有効期限の30日前から更新が可能です)