What's New Qiita

20200217のNode.jsに関する記事は6件です。

  • 投稿日：2020-02-17T21:15:56+09:00

Verdaccioを使って簡単local npm registryを構築する

ローカルにnpm registryを構築する方法はいくつかありますが、結構有名らしいVerdaccioを使って構築するための備忘録
ブログとかQiitaにも記事はあるんだけど肝心な設定が抜けていたりしていたのでその辺も載せておきます

目次

  1. 構築環境
  2. 必要なパッケージのインストール
  3. verdaccioの設定
  4. 一旦verdaccioを起動させる
  5. verdaccioをサービスに登録する
  6. registryを追加する
  7. npm userを作成する
  8. local registryに公開・削除する

構築環境

  • Linux mint 19.1
  • node.js 8.10.0
  • npm 3.5.2

必要なパッケージのインストール

npmのインストール

Verdaccioはnpm packageの一つなので大前提としてnpmをインストールしておく必要があります
(インストール済みであればスキップ)
sudo apt update && sudo apt install -y npm

verdaccioのインストール

npmをインストールし終わったらverdaccioをグローバルインストールします
sudo npm i -g verdaccio

verdaccioの設定

標準のサービスファイルをsystemdにコピーする

sudo cp /usr/local/lib/node_modules/verdaccio/systemd/verdaccio.service /etc/systemd/system/

Server Configuration・Verdaccioを参考にしていたのですが、どうやらLinux mintではサービスファイルの格納ディレクトリやsystemdディレクトリが違っていたので上記の様になりました
ディストロによって公式と同じディレクトリにあり、変更する必要がないかもしれないので適宜読み替えてください

公式のコマンドはこちら

sudo cp /usr/lib/node_modules/verdaccio/systemd/verdaccio.service /lib/systemd/system/

コピーしたサービスファイルを修正する

このままだとサービスを実行してもエラーを吐かれてしまうので下記画像の様に書き換えます

verdaccio_service.png

ExecStartに指定している実行ファイルの場所やconfigファイルの場所を変更しています
(verdaccioの実体がディストロによって変わるのか分かりませんが、Linux mintでは上記ディレクトリに配置されています)

configについては後程verdaccioを実行すると、ホーム直下の.config/以下に自動生成されるのでそれを割り当てています

一旦verdaccioを起動させる

verdaccioと打ち込んで起動させます
すると先ほども書いたように$HOME/.config/verdaccio/config.yamlが生成されているかと思います

configファイルを修正する

configファイルの生成を確認したら停止させるか別のターミナルを開き、以下の様に修正します
(ユーザー名がgn5rなので適宜読み替えてください)

$HOME/.config/verdaccio/config.yaml
storage: /home/gn5r/.local/share/verdaccio/storage
plugins: ./plugins

web:
  title: Verdaccio
storage: /home/gn5r/.local/share/verdaccio/storage
plugins: ./plugins

web:
  title: Verdaccio

auth:
  htpasswd:
    file: ./htpasswd

uplinks:
  npmjs:
    url: https://registry.npmjs.org/
  local:
    url:  http://localhost:4783/

packages:
  '@*/*':
    # scoped packages
    access: $all
    publish: $authenticated
    unpublish: $authenticated
    proxy: local

  '**':
    access: $all

    publish: $authenticated
    unpublish: $authenticated

    proxy: local
server:
  keepAliveTimeout: 60

middlewares:
  audit:
    enabled: true

listen: 0.0.0.0:4783

local registry のproxyを追加

これがキモでlocal registryと公式registryを両立させるためにproxyを追加

uplinks:
  local:
    url:  http://localhost:4783/

npm package問い合わせ先をlocal優先にする

この部分でパッケージ問い合わせをlocal registry優先にしています。見つからなかったら公式registryに問い合わせる感じ

packages:
  '@*/*':
    # scoped packages
    access: $all
    publish: $authenticated
    unpublish: $authenticated
    proxy: local

  '**':
    access: $all

    publish: $authenticated
    unpublish: $authenticated

    proxy: local

外部アクセスを受け付けるにはこれが必須

この設定をしないと開発マシンからverdaccioサーバーのwebページにアクセスできなかったり不便なのでほぼ必須です
(最初ちゃんと調べずにやっていたらエラーが出て、それをTwitterでボヤいたら公式が教えてくれました)
また、ポートを変えたい場合もここで設定できます(デフォルトは4873)

listen: 0.0.0.0:4783

verdaccioをサービスに登録する

起動・自動起動の設定

以下3つを実行しverdaccioを起動&自動起動を有効にする
sudo systemctrl daemon-reload
sudo systemctrl start verdaccio
sudo systemctrl enable verdaccio

動作確認

ポートを変えていなければブラウザを開いてIPアドレス:4873にアクセスするとverdaccioのwebページが表示されればOK

verdaccio_web.jpg

(画像ではポートを変えてあるので4783にアクセスしています)

registryを追加する

ここにも書いてありますが、構築したregistryを追加する方法はいくつかあるようです

パッケージ毎に分けたい場合

パッケージ(プログラム)以下のpackage.jsonがあるディレクトリの.npmrcにregistry=http://IPアドレス:4783を追記(無ければ作成)

グローバルに設定する場合

npm set registry http://IPアドレス:4783を実行

npmコマンド実行時に毎回registryの引数を渡す場合

各npmコマンド実行時に--registry http://IPアドレス:4783を付与

npm userを作成する

新規作成の場合

npm adduser --registry http://IPアドレス:4783
ユーザー名とパスワード、Emailを入力すれば完了(パスワードは1回入力)

ログインする場合

別マシンで作成したユーザーを使いたい場合は
npm login --registry http://IPアドレス:4783

local registryに公開・削除する

設定でlocalを優先にしているので、試しに--registryを付けずにpublish、unpublishしてみたけど途中で止まってしまったので、--registryは必須かと思います
(多分公式のregistryにも投げているのかもしれない。公式のaccessTokenは無いので認証部分で止まっているのかと推測しています)

公開

package.jsonがあるディレクトリで
npm publish --registry http://IPアドレス:4783

公開されているパッケージを削除する

npm unpublish --force パッケージ名 --registry http://IPアドレス:4783

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-17T21:15:56+09:00

Verdaccioを使って簡単private npm registryを構築する

ローカルにnpm registryを構築する方法はいくつかありますが、結構有名らしいVerdaccioを使ってprivate npm registryを構築するための備忘録
ブログとかQiitaにも記事はあるんだけど肝心な設定が抜けていたりしていたのでその辺も載せておきます

構築環境

  • Linux mint 19.1
  • node.js 8.10.0
  • npm 3.5.2

必要なパッケージのインストール

npmのインストール

Verdaccioはnpm packageの一つなので大前提としてnpmをインストールしておく必要があります
(インストール済みであればスキップ)
sudo apt update && sudo apt install -y npm

verdaccioのインストール

npmをインストールし終わったらverdaccioをグローバルインストールします
sudo npm i -g verdaccio

verdaccioをサービスに登録する

標準のサービスファイルをsystemdにコピーする

sudo cp /usr/local/lib/node_modules/verdaccio/systemd/verdaccio.service /etc/systemd/system/

Server Configuration・Verdaccioを参考にしていたのですが、どうやらLinux mintではサービスファイルの格納ディレクトリやsystemdディレクトリが違っていたので上記の様になりました
ディストロによって公式と同じディレクトリにあり、変更する必要がないかもしれないので適宜読み替えてください

公式のコマンドはこちら

sudo cp /usr/lib/node_modules/verdaccio/systemd/verdaccio.service /lib/systemd/system/

コピーしたサービスファイルを修正する

このままだとサービスを実行してもエラーを吐かれてしまうので下記画像の様に書き換えます

verdaccio_service.png

ExecStartに指定している実行ファイルの場所やconfigファイルの場所を変更しています
(verdaccioの実体がディストロによって変わるのか分かりませんが、Linux mintでは上記ディレクトリに配置されています)

configについては後程verdaccioを実行すると、ホーム直下の.config/以下に自動生成されるのでそれを割り当てています

一旦verdaccioを起動させる

verdaccioと打ち込んで起動させます
すると先ほども書いたように$HOME/.config/verdaccio/config.yamlが生成されているかと思います

configファイルを修正する

configファイルの生成を確認したら停止させるか別のターミナルを開き、以下の様に修正します
(ユーザー名がgn5rなので適宜読み替えてください)

$HOME/.config/verdaccio/config.yaml
storage: /home/gn5r/.local/share/verdaccio/storage
plugins: ./plugins

web:
  title: Verdaccio
storage: /home/gn5r/.local/share/verdaccio/storage
plugins: ./plugins

web:
  title: Verdaccio

auth:
  htpasswd:
    file: ./htpasswd

uplinks:
  npmjs:
    url: https://registry.npmjs.org/
  local:
    url:  http://localhost:4783/

packages:
  '@*/*':
    # scoped packages
    access: $all
    publish: $authenticated
    unpublish: $authenticated
    proxy: local

  '**':
    access: $all

    publish: $authenticated
    unpublish: $authenticated

    proxy: local
server:
  keepAliveTimeout: 60

middlewares:
  audit:
    enabled: true

listen: 0.0.0.0:4783

local registry のproxyを追加

これがキモでlocal registryと公式registryを両立させるためにproxyを追加

uplinks:
  local:
    url:  http://localhost:4783/

npm package問い合わせ先をlocal優先にする

この部分でパッケージ問い合わせをlocal registry優先にしています。見つからなかったら公式registryに問い合わせる感じ

packages:
  '@*/*':
    # scoped packages
    access: $all
    publish: $authenticated
    unpublish: $authenticated
    proxy: local

  '**':
    access: $all

    publish: $authenticated
    unpublish: $authenticated

    proxy: local

外部アクセスを受け付けるにはこれが必須

この設定をしないと開発マシンからverdaccioサーバーのwebページにアクセスできなかったり不便なのでほぼ必須です
(最初ちゃんと調べずにやっていたらエラーが出て、それをTwitterでボヤいたら公式が教えてくれました)
また、ポートを変えたい場合もここで設定できます(デフォルトは4873)

listen: 0.0.0.0:4783

verdaccioをサービスに登録する

sudo systemctrl start verdaccio
sudo systemctl enable verdaccio

動作確認

ポートを変えていなければブラウザを開いてIPアドレス:4873にアクセスするとverdaccioのwebページが表示されればOK

verdaccio_web.jpg

(画像ではポートを変えてあるので4783にアクセスしています)

registryを追加する

ここにも書いてありますが、構築したregistryを追加する方法はいくつかあるようです

パッケージ毎に分けたい場合

パッケージ(プログラム)以下のpackage.jsonがあるディレクトリの.npmrcにregistry=http://IPアドレス:4873を追記(無ければ作成)

グローバルに設定する場合

npm set registry http://IPアドレス:4783を実行

npmコマンド実行時に毎回registryの引数を渡す場合

各npmコマンド実行時に--registry http://IPアドレス:4783を付与

npm userを作成する

新規作成の場合

npm adduser --registry http://IPアドレス:4783
ユーザー名とパスワード、Emailを入力すれば完了(パスワードは1回入力)

ログインする場合

別マシンで作成したユーザーを使いたい場合は
npm login --registry http://IPアドレス:4783

private registryに公開・削除する

設定でlocalを優先にしているので、試しに--registryを付けずにpublish、unpublishしてみたけど途中で止まってしまったので、--registryは必須かと思います
(多分公式のregistryにも投げているのかもしれない。公式のaccessTokenは無いので認証部分で止まっているのかと推測しています)

公開

package.jsonがあるディレクトリで
npm publish --registry http://IPアドレス:4783

公開されているパッケージを削除する

npm unpublish --force パッケージ名 --registry http://IPアドレス:4783

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-17T16:57:01+09:00

N予備校の教材で割といけてるWebサービスが作れた！

N予備校のプログラミング入門コースが本格的だと最近話題ですね！
というわけでN予備校入門コースの技術を使って、1からWebサービスを作ってみました！

作ったサービス

https://www.meish.me/
バーチャルキャラクターのためのプロフィール登録サービスです

開発は1人（テスターさん除く）で、開発期間（リリースまで）は2ヶ月ちょいでした。
プログラミング初心者ではないですが、Webサービスをリリースするのは初めてです。

リリースから2日で400名以上のバーチャルなキャラクターさんが登録してくれていて、わりとちゃんとしたWebサービスになってるかなと思います！

TOPページ
image.png
プロフィールページ
image.png

GitHub
https://github.com/OkuriSae/Meish

使った技術

必要に迫られない限り、N予備校のプログラミングコースで学べる内容で進めました！
プログラミング入門コースを終えた時点で以下の環境ができてるので、すぐに開発が始められて便利 (◦ˉ ˘ ˉ◦)

今回使った技術のうち、N予備校で教えてくれるもの

  • 第１章
    • VSCode, JavaScript, HTML, CSS, Tweetボタン
  • 第２章
    • VirtualBox, Vagrant, Ubuntu, git, GitHub
  • 第3章
    • Node.js, Pug, PostgreSQL, sequelize, Bootstrap4, Heroku
    • 脆弱性対策(XSS,CSRFとか)
  • 第４章
    • Express, webpack, Passport
  • 特別付録コース
    • TwitterAPI

今回使ったもので、N予備校に無いもの

  • Google Domain
    • meish.me のドメインを取得しました
  • Amazon S3
    • アップロード画像の保存先に使いました (Herokuでは画像保存ができないので)
  • Jimp （画像処理のnpmモジュール）
    • 画像の圧縮やリサイズに使いました
  • OGP/TwitterCard
    • ツイッターやSlackにURLを貼ると画像が展開されるアレです！

本番リリースまでにやったこと

N予備校の教材に書いてあること以外で、本番リリースまでにやったことです！

Twitterのデベロッパー申請した

GitHubのアプリケーション登録と違い、Twitterはデベロッパー申請が必要です！
Google翻訳を使いながら英語で申請文を作りましたが、N予備校の特別付録にやり方が載ってたので助かり。審査とかで１週間ぐらいかかりました。

Google Domainでmeish.meのドメインとった

なんとなくGoogle Domainでとっちゃったけど、DMMやお名前ドットコムの方が初年度すごい安いのでそっちがいいかも。meish.meのドメインは年2,600円ぐらいかかるみたいです。（料金はドメインによって違います）
Herokuに転送するためにはサブドメインを切る必要があるみたいなので、www.meish.meのサブドメインを作りました（サブドメインを作るのはタダ）。

HerokuのDynoPlanをHobbyにしてSSL設定した

独自ドメインを使ったり、SSL証明書の設定をするのはHobbyプランからみたいでした。Hobbyプランは$7.00/月です。HobbyプランだとサーバーのリージョンがUSとかUKしか選べないので、ちょっと遅いことがあるかも。

meish.meのドメインからHerokuのドメインに転送する設定やった

meish.meのドメインでHerokuに繋がるようにする設定をしました。
Heroku側にドメインを登録するとDNS Targetとやらをもらえるので、Googleドメイン側でそのDNS Targetに転送するように設定しました。

HerokuのPostgreSQLのプランをHobby Basicにした

HerokuのPostgreSQLアドオンはdevプランだと合計5万件しかデータを作れないみたいなので、1千万件までデータを保存できるHobby-Basicプラン（$9.00/月）にしました。サービスの種類や設計によってはdevプランでも全然大丈夫かも。

Herokuで画像保存してたらデプロイや再起動のたびに画像が消えちゃったのでAmazon S3にした

Herokuはデプロイのタイミングや1日1回行われるサーバーの再起動で、サーバーをコンテナごと作り直すので、ローカルに作ったファイルなどが消えてしまうみたいです。
裏技としてデータベースにBlobで画像をおいておく方法があるみたいですが、今回は素直に外部ストレージ（Amazon S3）を使うことにしました。

OGPとかTwitterCard用のメタタグをいれた

URLをTwitterとかで拡散してもらいたいので、画像展開されるOGP/TwitterCardの設定をしました！HTMLのHEADスペースにOGPやTwitterCard用のメタタグを入れるだけなので簡単でした。
OGPのパワー➡︎ https://twitter.com/hashtag/Meish?f=live

おわりに

今年の1月にN予備校のバーチャル特別講師として招いていただいたので、そのお礼も兼ねて（？）N予備校でこんなことできるよーっていうのをやってみました！

またちょうどN予備校の内容でWebサービスを作るコンテストが開催中で、高校生の方やN予備校生の方がたくさん参加しているようなので、この記事がお役に立てば嬉しいです！（応募期間終わっちゃったけど…）

小栗さえ（青葉さえ）
Twitter: @OkuriSae

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-17T16:57:01+09:00

N予備校の教材縛りで割といけてるWebサービスが作れた！

N予備校のプログラミング入門コースが本格的だと最近話題ですね！
というわけでN予備校入門コースの技術を使って、1からWebサービスを作ってみました！
（ゆるい縛りプレイみたいな感じ）

作ったサービス

https://www.meish.me/
バーチャルキャラクターのためのプロフィール登録サービスです

開発は1人（テスターさん除く）で、開発期間（リリースまで）は2ヶ月ちょいでした。
プログラミング初心者ではないですが、Webサービスをリリースするのは初めてです。

リリースから2日で400名以上のバーチャルなキャラクターさんが登録してくれていて、わりとちゃんとしたWebサービスになってるかなと思います！

TOPページ
image.png
プロフィールページ
image.png

GitHub
https://github.com/OkuriSae/Meish

使った技術

必要に迫られない限り、N予備校のプログラミングコースで学べる内容で進めました！
プログラミング入門コースを終えた時点で以下の環境ができてるので、すぐに開発が始められて便利 (◦ˉ ˘ ˉ◦)

今回使った技術のうち、N予備校で教えてくれるもの

  • 第１章
    • VSCode, JavaScript, HTML, CSS, Tweetボタン
  • 第２章
    • VirtualBox, Vagrant, Ubuntu, git, GitHub
  • 第3章
    • Node.js, Pug, PostgreSQL, sequelize, Bootstrap4, Heroku
    • 脆弱性対策(XSS,CSRFとか)
  • 第４章
    • Express, webpack, Passport
  • 特別付録コース
    • TwitterAPI

今回使ったもので、N予備校に無いもの

  • Google Domain
    • meish.me のドメインを取得しました
  • Amazon S3
    • アップロード画像の保存先に使いました
    • Herokuでは画像保存ができないので仕方なし！
  • Jimp （画像処理のnpmモジュール）
    • 画像の圧縮やリサイズに使いました
    • 画像そのまま保存するとデータ転送量が大変…
  • OGP/TwitterCard
    • ツイッターやSlackにURLを貼ると画像が展開されるアレ！
    • HEADにメタタグを入れるだけなのでカンタン

本番リリースまでに追加でやったこと

N予備校の教材に書いてあること以外で、本番リリースまでにやったことです！

Twitterのデベロッパー申請した

GitHubのアプリケーション登録と違い、Twitterはデベロッパー申請が必要です！
Google翻訳を使いながら英語で申請文を作りましたが、N予備校の特別付録にやり方が載ってたので助かり。審査とかで１週間ぐらいかかりました。

Google Domainでmeish.meのドメインとった

なんとなくGoogle Domainでとっちゃったけど、DMMやお名前ドットコムの方が初年度すごい安いのでそっちがいいかも。meish.meのドメインは年2,600円ぐらいかかるみたいです。（料金はドメインによって違います）
Herokuに転送するためにはサブドメインを切る必要があるみたいなので、www.meish.meのサブドメインを作りました（サブドメインを作るのはタダ）。

HerokuのDynoPlanをHobbyにしてSSL設定した

独自ドメインを使ったり、SSL証明書の設定をするのはHobbyプランからみたいでした。Hobbyプランは$7.00/月です。HobbyプランだとサーバーのリージョンがUSとかUKしか選べないので、ちょっと遅いことがあるかも。

meish.meのドメインからHerokuのドメインに転送する設定やった

meish.meのドメインでHerokuに繋がるようにする設定をしました。
Heroku側にドメインを登録するとDNS Targetとやらをもらえるので、Googleドメイン側でそのDNS Targetに転送するように設定しました。

HerokuのPostgreSQLのプランをHobby Basicにした

HerokuのPostgreSQLアドオンはdevプランだと合計5万件しかデータを作れないみたいなので、1千万件までデータを保存できるHobby-Basicプラン（$9.00/月）にしました。サービスの種類や設計によってはdevプランでも全然大丈夫かも。

Herokuで画像保存してたらデプロイや再起動のたびに画像が消えちゃったのでAmazon S3にした

Herokuはデプロイのタイミングや1日1回行われるサーバーの再起動で、サーバーをコンテナごと作り直すので、ローカルに作ったファイルなどが消えてしまうみたいです。
裏技としてデータベースにBlobで画像をおいておく方法があるみたいですが、今回は素直に外部ストレージ（Amazon S3）を使うことにしました。

OGPとかTwitterCard用のメタタグをいれた

URLをTwitterとかで拡散してもらいたいので、画像展開されるOGP/TwitterCardの設定をしました！HTMLのHEADスペースにOGPやTwitterCard用のメタタグを入れるだけなので簡単でした。
OGPのパワー➡︎ https://twitter.com/hashtag/Meish?f=live

おわりに

今年の1月にN予備校のバーチャル特別講師として招いていただいたので、そのお礼も兼ねて（？）N予備校でこんなことできるよーっていうのをやってみました！

またちょうどN予備校の内容でWebサービスを作るコンテストが開催中で、高校生の方やN予備校生の方がたくさん参加しているようなので、この記事がお役に立てば嬉しいです！（応募期間終わっちゃったけど…）

小栗さえ（青葉さえ）
Twitter: @OkuriSae

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-17T13:16:25+09:00

nodebrewによるNode.jsのインストールとバージョン管理

概要

ローカル環境がごちゃごちゃしていたので一度全てアンインストールしてので再インストールした記録。

環境

macOS Catalina 10.15.3
zsh(bashを使用している場合は「.zshrc」を「.bashrc」に読み替えられる。）
homebrew

手順

1.Node.jsの確認とnodebrewのインストール

$ node -v # nodeの存在の確認 #バージョンが表示されたら先にアンインストールする。
  command not found: node

$ brew install nodebrew # nodebrewのインストール

$ nodebrew -v # nodebrewインストールの確認
  nodebrew 1.0.1

2.PATHの設定

$ nodebrew setup # PATHの部分をコピー
Fetching nodebrew...
Installed nodebrew in $HOME/.nodebrew

========================================
Export a path to nodebrew:

export PATH=$HOME/.nodebrew/current/bin:$PATH # <=ここをコピー
========================================

$ echo '# nodebrew' >> ~/.zshrc \ # PATHを通す
$ echo 'さっきのコピーを貼り付け' >> ~/.zshrc \
$ #例) echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zshrc \

$ vim .zshrc # PATHの確認。「:q」でvimを終了。
# nodebrew
export PATH=$HOME/.nodebrew/current/bin:$PATH

3.Node.jsのインストール

$ nodebrew install-binary stable # Node.js安定版(stable)のインストール。

$ nodebrew list # インストールの確認
v13.8.0
v12.16.0
current: none

$ nodebrew use 12.16.0 # バージョンの変更。複数ある場合はインストール時に表示されたバージョン。
use v12.16.0

$ nodebrew ls # 使用バージョン(current)の確認。
v12.16.0
v13.8.0
current: v12.16.0

$ node -v # バージョン確認
v12.16.0

$ npm -v # node.jsと一緒にインストールされるパッケージ管理ツール。
6.13.4

4.使用しないバージョンのアンインストール（任意）

$ brew uninstall 13.8.0 # アンインストール
v13.8.0 uninstalled

$ nodebrew ls # アンインストール確認。
v12.16.0
current: v12.16.0

参考

【2018年版】macのhomebrewでnodebrew入れてからnode.jsを入れるまで
NodebrewでNodeをインストールする

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-17T10:54:19+09:00

EXCELファイルをバックアップし、DBに格納【Node.js Express】

エクセルファイルをアップロードしたら、バックアップを作成し、中身のデータをデータベースに登録するAPIを作りました。また似たような作業することになりそうなので、メモ。
Node.jsとExpress、データベースはMysqlを使用

使うもの

１）multer
アップロードされたエクセルファイルを特定のファイルにコピーする。
※ただし、multipart/form-dataのみ
https://www.npmjs.com/package/multer

インストール：
npm install --save multer

２）sheetjs
エクセルファイルの書き換え等ができる。
今回はエクセルファイルをJSONに変換するのに使用した。
https://www.npmjs.com/package/xlsx

インストール：
npm install --save xlsx

実装

const express = require('express')
const app = express()
const models = require('../model/models')
const xlsx = require('xlsx')
const multer = require('multer')
const storage = multer.diskStorage({
    //保存先を指定
  destination: function (req, file, cb) {
    cb(null, './uploads/excels')
  },
    //ファイル名の先端に日付をつけて保存
  filename:  function (req, file, cb) {
    cb(null, new Date().toISOString() + file.originalname)
  }
})

const fileFilter = (req, file, cb) => {
  //ファイルの拡張子を確認 とりあえず、excelとspredsheetを。
  if (file.mimetype === 'application/vnd.ms-excel' || file.minetype === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
    cb(null, true)
  } else {
    cb(null, false)
  }
}


const upload = multer({
  storage: storage,
  limits: {
    //アップロードできるファイル数
    files: 1,
    //ファイルサイズ（２MB@）
    fieldSize: 2 * 1024 * 1024
  },
  fileFilter: fileFilter
})

app.post('/upload' , upload.single('postしてくる時のキー'), async(req, res) => {
  try {
    const sheet = xlsx.readFile('./uploads/excels/' + req.file.filename, { cellDates: true })
    const workingSheet = sheet.Sheets['シート名']
    const data = xlsx.utils.sheet_to_json(workingSheet)
    var dataArray = []
    //カラム名
    var fieldNames = ['date', 'name', 'tel']
    for (var i in data) {
      //String型を明記しないとエラーになったので。　
      //エクセルのカラム名？（カラム最上セルのテキスト）日本語なのがアレなので良い方法あれば教えて欲しいです。
      //電話番号は -（ハイフン） を抜き取る。
      var insertData = `(${JSON.stringify(data[i].日付) || null}, ${JSON.stringify(data[i].名前) || null}, , ${data[i].電話番号.replace(/-/g, '') || null})`
      dataArray.push(insertData)
    }
    const tableName = 'テーブル名'
    //毎回データを総入れ替えする仕様のため、全データ消す
    const areDeleted = await models.deleteAll(tableName)
    if (!areDeleted) return res.status(500).json({ message: 'エラーが発生！' })
    //データを挿入
    const areInserted = await models.insertData(tableName, fieldNames, dataArray)
    if (!areInserted) return res.status(500).json({ message: 'エラー発生！' })
    return res.status(200).json({ message: '成功！' })
  } catch (err) {
    console.log(err)
    return res.status(500).json({ message: 'エラーが発生！' })
  }
})

モデル抜粋

model.js
const mysql = require('mysql2')
const models = {}

// Setup database
const connection = mysql.createConnection({
  host: ホスト,
  user: ユーザー,
  password: パスワード,
  database: データベース名,
  port: ポート番号,
  multipleStatements: true //複数のコールを有効化
})

connection.connect((err) => {
  if (!err)
    console.log('接続成功')
  else
    console.log('接続失敗 : ' + JSON.stringify(err, undefined, 2))
})

models.deleteAll = (tableName) => {
  return new Promise((resolve, reject) => {
    connection.query(`DELETE FROM ${tableName}`, (err, results) => {
      console.log(results)
      if (err) return reject(err)
      else return resolve(results)
    })
  })
}

models.insertData = (tableName, fieldName, insertData) => {
  return new Promise((resolve, reject) => {
    connection.query(`INSERT INTO ${tableName} (${fieldName}) VALUES ${insertData}`, (err, results) => {
      console.log(results)
      if (err) return reject(err)
      else return resolve(results)
    })
  })
}

module.exports.models = models
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧