今回は、その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
0 件のコメント :
コメントを投稿