mac の .Net Core でapi作成
windows の場合は、visualstudio でプロジェクトのテンプレートを作成すれば良さそうですが、macの場合は visualstudio code(VScode)にはプロジェクトのテンプレートを作成する機能は無いため、どうやって作るのか調べてみました。
前提条件
Node.js がインストールされていること
前準備
必要なパッケージのインストール
$ npm install -g yo bower grunt-cli gulp $ npm install -g generator-aspnet
プロジェクトテンプレートの作成
プロジェクトのテンプレート作成にはyoemanを使います。
yoemanは対話的にプロジェクトのテンプレートを作成してくれる物です。
yo
コマンド実行でテンプレート作成を開始します。
$ yo aspnet
下記の様に対話的にテンプレートを作成していきます。
? ========================================================================== We're constantly looking for ways to make yo better! May we anonymously report usage statistics to improve the tool over time? More info: https://github.com/yeoman/insight & http://yeoman.io ========================================================================== Yes _-----_ ╭──────────────────────────╮ | | │ Welcome to the │ |--(o)--| │ marvellous ASP.NET Core │ `---------´ │ generator! │ ( _´U`_ ) ╰──────────────────────────╯ /___A___\ / | ~ | __'.___.'__ ´ ` |° ´ Y ` ? What type of application do you want to create? Web API Application ? What's the name of your ASP.NET application? aspnet_test create aspnet_test/.gitignore create aspnet_test/appsettings.json create aspnet_test/Dockerfile create aspnet_test/Startup.cs create aspnet_test/Program.cs create aspnet_test/project.json create aspnet_test/Properties/launchSettings.json create aspnet_test/Controllers/ValuesController.cs create aspnet_test/web.config create aspnet_test/README.md Your project is now created, you can use the following commands to get going cd "aspnet_test" dotnet restore dotnet build (optional, build will also happen when it's run) dotnet run
実際に設定した項目
項目 | 内容 |
---|---|
アプリケーションの種類 | Web API Application |
アプリ名 | aspnet_test |
その後の操作手順も書いてありますので、記載のコマンドをそのまま実行してみます。
$ cd aspnet_test $ dotnet restore $ dotnet build $ dotnet run Project aspnet_test (.NETCoreApp,Version=v1.0) was previously compiled. Skipping compilation. Hosting environment: Production Content root path: /Users/naught/tutorial/aspnet_test/aspnet_test Now listening on: http://localhost:5000 Application started. Press Ctrl+C to shut down.
サーバーが起動して、 http://localhost:5000
でアクセス可能なことがわかります。
Controllers/ValuesController.cs
を見るとアクセス可能なAPIがわかります。
試しに、 http://localhost:5000/api/values
にアクセスしてみます
VScodeの場合左のメニューにあるデバッグマークからのデバッグ実行でもアプリ起動可能です。
こちらから実行させた場合、ブレークポイントなどもはれてデバッグがはかどります。
おまけ
リリースビルドする方法
$ dotnet build -c Release
macで始める .Net Core
いつのまにか簡単な手順で動作確認までできるようになっていました。
基本的に公式HPの手順に従えば動作確認まではできるようになってました。
.NET - Powerful Open Source Development
前提条件
Homebrew がインストールされていること
手順
1. はじめに
SDKインストールの前に openssl をインストールします。
$ brew update $ brew install openssl $ ln -s /usr/local/opt/openssl/lib/libcrypto.1.0.0.dylib /usr/local/lib/ $ ln -s /usr/local/opt/openssl/lib/libssl.1.0.0.dylib /usr/local/lib/
2. .Net Core SDK のインストール
インストーラのDL先 official installer
ダウンロードしたpkgをインストールします。
ここまでで、環境構築は完了です。
3. プロジェクトの作成
ディレクトリを作成して、プロジェクトを新規作成します。
dotnet new
のコマンドだけでプロジェクト作成が完了して簡単になりました。
$ mkdir hwapp $ cp hwapp $ dotnet new
4. コンパイル&実行
$ dotnet restore $ dotnet run
初回実行時はコンパイル処理が入りますが、最後に Hello World!
と出力されていることがわかります。
$ dotnet run Project hwapp (.NETCoreApp,Version=v1.0) will be compiled because expected outputs are missing Compiling hwapp for .NETCoreApp,Version=v1.0 Compilation succeeded. 0 Warning(s) 0 Error(s) Time elapsed 00:00:01.8591704 Hello World!
railsサーバーとのAPI通信
概要
rails で作成したサーバー との post通信でfetchを使ったときの注意点
環境
- サーバー
- rails 4.2.4
- フロント
内容
railsで作成したサーバーとのAPI通信の為だけにjqueryを使うのは重いという話を聞いたのでfetchを使ってみました。
post送信するために最初に書いてみたソースコード
var data = new FormData(); data.append('', ); // post送信したいデータ fetch('post先のURL, { method: 'post', body: data }).then( (response) => { if (response.status >= 200 && response.status < 300) { return response.json(); } else { var error = new Error(response.statusText) throw error } }).then( (data) => { // 成功時に実行したい処理 }).catch( (error) => { // 失敗時に実行したい処理 });
上記ソースコードの場合、railsで作成したAPIサーバーと通信するためには
する必要があるようです。
修正したソースコード
var data = new FormData(); data.append('', ); // post送信したいデータ fetch('post先のURL, { method: 'post', credentials: 'include', headers: {'X-CSRF-Token': document.getElementsByName('csrf-token').item(0)['content']}, body: data }).then( (response) => { if (response.status >= 200 && response.status < 300) { return response.json(); } else { var error = new Error(response.statusText) throw error } }).then( (data) => { // 成功時に実行したい処理 }).catch( (error) => { // 失敗時に実行したい処理 });
無事に通信できました。
参考にしたページ
フロントエンドのローカルテスト用にサーバーを立てる
概要
フロントエンドの開発で ローカルの index.html などを開いて動作確認などしていると、 chrome のセキュリティの関係でエラーが出ることが多くうまくデバッグできないことが多い。
そのようなときに簡単にサーバーを立てて動作確認する方法です。
express
node.js の webアプリケーションフレームワーク
Express - Node.js Web アプリケーション・フレームワーク
使い方
express のインストール
$ npm init $ npm install -g express
サーバー構成
ディレクトリ構造
root |-- app.js |-- dist |-- index.html
※ 今回の構成では root/dist/index.html
のテストをしたい
サーバー設定
app.js に設定を記述する。
例
var express = require('express'); var app = express(); app.use(express.static('dist')); var port = 3000; app.listen(port,function(){ console.log("Expressサーバーがポート%dで起動しました。モード:%s",port,app.settings.env) });
サーバー起動
$ node app.js
localhost:3000/
にアクセスすることでローカルの index.htmlを確認することができる。
フロントエンドのタスクランナーに npm script
概要
フロントエンドの開発環境で npm script が使える
フロントエンド開発を始めようと思うと、最近はいろんなものを組み合わせて開発環境を作るのが普通に感じた。
タスクランナーだと下記のものがよく使われてるように感じるけど、正直使い方がよくわからない。
- glunt
- gulp
npm script を使ってみる
プロジェクトの初期設定
対話的にプロジェクトの初期設定をする。
$ npm init .
ちょっと試して見たいだけなら、全部 Enter で大丈夫。
終了すると、 package.json
が作成される。
package.json にはプロジェクトの設定が記述されていて、以降で作成するタスクもこのファイルに記述する。
プロジェクトに必要なライブラリのインストール
他の人が作成したプロジェクトを使うときなどは、下記コマンドで開発環境を作成することができる。
$ npm install
タスクの作成
タスクは package.json に記述する。
以下は npm init
で作成された例
{ "name": "test-package", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }
ここで、タスクは
"scripts": { "test": "echo \"Error: no test specified\" && exit 1" },
の部分に記載する。
例
コンソールに test
と出力するスクリプトを書いてみる。
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "echo": "echo test" },
実行
$ npm run echo
※ 今回の例では echo
というコマンドを作成した為上記のコマンドで実行できる。
タスクの実行は
$ npm run <タスク名>
実行結果
$ npm run echo test
kotlinのenum定義バグ?
gitでmasterにマージ済みのブランチを一括削除する方法
概要
git を使用していて master にマージ済みのブランチを一括して削除したい
方法
$ git checkout master $ git branch --merged | grep -v '*' | xargs -I % git branch -d %