以前にNode express ect multerでファイルアップロードする機能を実装した記事を書いた。
今回は、そのNodeのプロジェクトを少しブラッシュアップして、GitHubに登録、公開した。
※ブラッシュアップ箇所は、日本語を英語に変更、プログラム内の不要なステートメントの削除など。
node express ect multerでファイルアップロード
手順は次のとおり。
自PCはMac book Pro、masOS High Sierra バージョン10.13.6
GitHubで新規リポジトリを作成する。
GitHubの自分のリポジトリの画面で、New repositoryボタンをクリック。
Repository nameに、multer_sample を入力。
Initialize this repository with a README をチェック。
Add .gitignoreで、Nodeを選択。
これら以外は、デフォルト値のまま。
Create repositoryボタンをクリック。
リポジトリが作成直後。
次の手順に進める。
自分のPCに作成したリポジトリをCloneするために、Clone or downloadボタンをクリック、SSHでClone用のテキストをコピーする。
自PCにmulter_sampleのプロジェクトをCloneする。
Gitのコマンドを入力する。その際にGitHubに登録したSSH keyのパスフレーズを聞かれるので入力が必要。
※[XXXXX]はユーザディレクトリ。
git clone git@github.com:takaharu-kobayashi/multer_sample.git
Cloning into 'multer_sample'...
Enter passphrase for key '/Users/[XXXXX]/.ssh/id_rsa':
remote: Enumerating objects: 4, done.
remote: Counting objects: 100% (4/4), done.
remote: Compressing objects: 100% (3/3), done.
remote: Total 4 (delta 0), reused 0 (delta 0), pack-reused 0
Receiving objects: 100% (4/4), done.
自PCにmulter_sampleプロジェクトをClone直後。次の手順に進む。
multer_sampleにプログラム一式をコピーする。
multer_sampleプロジェクトの状態を確認してみる。
Gitのコマンドを入力する。
cd ./multer_sample/
git status
On branch master
Your branch is up to date with 'origin/master'.
Untracked files:
(use "git add ..." to include in what will be committed)
app.js
bin/
package.json
public/
routes/
views/
nothing added to commit but untracked files present (use "git add" to track)
コピーしたプログラム一式をステージ領域に登録、確認をする。
Gitのコマンドを入力する。
git add .
git status
On branch master
Your branch is up to date with 'origin/master'.
Changes to be committed:
(use "git reset HEAD ..." to unstage)
new file: app.js
new file: bin/www
new file: package.json
new file: public/javascripts/jquery-2.1.4.min.js
new file: public/uploads/dummy.txt
new file: routes/index.js
new file: views/error.ect
new file: views/footer.ect
new file: views/index.ect
new file: views/layout.ect
new file: views/script.ect
自PCのGitのリポジトリへ、前の操作でステージ領域に登録された内容をコミットする。
Gitのコマンドを入力する。
git commit -m "Added multer sample files"
[master f20cf5d] Added multer sample files
11 files changed, 296 insertions(+)
create mode 100644 app.js
create mode 100755 bin/www
create mode 100644 package.json
create mode 100644 public/javascripts/jquery-2.1.4.min.js
create mode 100644 public/uploads/dummy.txt
create mode 100644 routes/index.js
create mode 100644 views/error.ect
create mode 100644 views/footer.ect
create mode 100644 views/index.ect
create mode 100644 views/layout.ect
create mode 100644 views/script.ect
GitHubのリポジトリへ、自PCのGitリポジトリにコミットした内容をPushする。
Gitのコマンドを入力する。その際にGitHubに登録したSSH keyのパスフレーズを聞かれるので入力が必要。
※[XXXXX]はユーザディレクトリ。
git push
Enter passphrase for key '/Users/[XXXXX]/.ssh/id_rsa':
Counting objects: 19, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (14/14), done.
Writing objects: 100% (19/19), 32.59 KiB | 5.43 MiB/s, done.
Total 19 (delta 0), reused 0 (delta 0)
To github.com:takaharu-kobayashi/multer_sample.git
80e8133..f20cf5d master -> master
GitHubの画面でPushされた内容を確認する。問題なくPushした内容が反映されているみたいだ。
次は念のため、GitHubのmulter_sampleプロジェクトをCloneして動作するか確認する。
自PCのmulter_sampleプロジェクトがあるディレクトリではない別のディレクトリでCloneを行う。
Gitのコマンドを入力する。その際にGitHubに登録したSSH keyのパスフレーズを聞かれるので入力が必要。
※[XXXXX]はユーザディレクトリ。
git clone git@github.com:takaharu-kobayashi/multer_sample.git
Cloning into 'multer_sample'...
Enter passphrase for key '/Users/[XXXXX]/.ssh/id_rsa':
remote: Enumerating objects: 23, done.
remote: Counting objects: 100% (23/23), done.
remote: Compressing objects: 100% (17/17), done.
remote: Total 23 (delta 1), reused 19 (delta 0), pack-reused 0
Receiving objects: 100% (23/23), 33.63 KiB | 242.00 KiB/s, done.
Resolving deltas: 100% (1/1), done.
multer_sampleプロジェクトに必要なパッケージをインストールする。
npmのコマンドを入力する。
※package.json内で指定しているバージョンがdeprecateになっているものがある。2016年1月に作成したプログラムなので古いから、deprecateになっててもおかしくない。動作確認が目的なので、とりあえずそのままにしておく。
cd ./multer_sample/
npm install
npm WARN deprecated jade@1.11.0: Jade has been renamed to pug, please install the latest version of pug instead of jade
npm WARN deprecated constantinople@3.0.2: Please update to at least constantinople 3.1.1
npm WARN deprecated transformers@2.1.0: Deprecated, use jstransformer
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
npm notice created a lockfile as package-lock.json. You should commit this file.
added 136 packages from 155 contributors and audited 212 packages in 3.884s
found 15 vulnerabilities (8 low, 2 moderate, 5 high)
run `npm audit fix` to fix them, or `npm audit` for details
いよいよ、multer_sampleプロジェクトを動作させる。
npmのコマンドを入力する。
npm start
ブラウザで、multer_sampleプロジェクトを表示してみる。
ちゃんと表示された。あとアップロードも正常に動いた。
これで終わり。
ちなみに、GitHub上のmulter_sampleのリンクは次のとおり。
https://github.com/takaharu-kobayashi/multer_sample
