わしのlog

プログラミングとかバイクとか。

gitlab-runnerを使って.NET Frameworkのプロジェクトをビルドする

はじめに

こんにちは、だいきちです。
今回はgitlab-runnerを使って.NET Framework製のプロジェクトをビルドしてみたいと思います。
MSBuildを使用するため、runnerの登録はWindows側にしています。
悪戦苦闘したので、備忘録として。

環境

runnner側: Windows10 pro
GitLab側: Ubuntu 18.04 LTS

手順

今回はこの記事を参考にさせていただきました。
qiita.com

1. 証明書の作成

openssl.cnfを編集し、subjectAltnameUbuntuIPアドレスを追記
※注: 記事中はopenssl.cnfの階層が/etc/pki/tls/となっていますが
今回はUbuntuなので/usr/lib/ssl/となります。
次に、記事コマンドを参考に、ubuntu上にserver.keyserver.crtを生成。

2. gitlab.rbの編集

秘密鍵と証明書のパスを追記しておきましょう。

nginx['ssl_certificate'] = "秘密鍵のパス"
nginx['ssl_certificate_key'] = "証明書のパス"

その後は、下記コマンドでGitLabをrestart

$ sudo gitlab-ctl reconfigure
$ sudo gitlab-ctl restart

3. Tokenの確認

CIを行う対象GitLabプロジェクトのページに移動し
Settings > CI/CD > Runners を開いて、Set up a specific Runner manuallyに書いてある
URLとTokenをコピーしておきます。

4. GitLab-Runnerのインストール

公式の手順を参考にインストールしましょう。
○ダウンロードURLからexeファイルをダウンロード
○リネームして任意の場所に配置
とりあえずここまでが終わったら、一旦Windows側にサーバ証明書をインストールしてやります。
参考記事証明書のインストール参照。
これまたこの記事を参考にさせていただきました。

qiita.com

  1. WinSCP等でUbuntu側からserver.crtファイルを持ってくる
  2. PowerShellを管理者権限で開いて、server.crtがあるディレクトリに移動。
    その後、certutil -addstore -f -user "ROOT" server.crt を実行。
  3. gitlab-runner.exeがあるディレクトリに移動
    その後、gitlab-runner.exe registerコマンドを使用
    対話形式で情報を聞かれるので順に
    ○先程確認したURL
    ○先程確認したToken
    ○GitLabRunnerの説明
    ○タグ(任意)
    ○タグがつけられていないジョブを実行するかどうか
    ○GitLab Runnerを現在GitLabにあるプロジェクトのみで使用するかどうか
    ○GitLab Runnerのタイプ→私はpowershellを選択
  4. runnerのユーザ登録を行う
    gitlab-runner.exe install --password [ログイン中のWindowsユーザのパスワード]

5. GitLab-Runnerの起動

いよいよ起動です。
ここでgitlab-runner.exe startと実行すると・・・
私の場合、起動しませんでした
他の方の記事を見ているとこのコマンドで起動できているみたいなのですが
どうやら私はgitlab-runner.exe runでないとうまく起動しないようです。
だれか知見のある方いらっしゃいましたら教えていただきたい・・・。

gitlab-ci.ymlの作成

一応、私はこんな感じで作りました。
IISを使ったことのある方は見覚えのあるディレクトリがあるかと思います。

variables:
  UNITTEST_FOLDER: './tests/bin/Release/'

stages:
  - build

# build用のjob
build_job:
  stage: build
  only:
    - branches
  script:
    - chcp 65001
    - 'nuget restore ./hogeProject'
    - 'msbuild ./hogeProject/hoge.sln /nr:false /p:Configuration=Release /clp:ErrorsOnly'
  artifacts:
    expire_in: 2 days
    paths:
      - '"%UNITTEST_FOLDER%"'

ちょっと勉強不足感もあり、artifacts配下のpathsはほぼ意味を為していません(ぇ
書いてあることはほぼほぼそのままなんですが、deploy時のscriptはごっちゃごちゃなのであえて載せていません。

後は該当プロジェクトにpush時、CIが動いているか確認してあげましょう。

その他

gitlab-ci.ymlでの注意点

○gitlab-ci.ymlでWindows環境での環境変数の指定の仕方が違う
powerShellを使っているので当たり前なのですが、環境変数に用いる記号が違います。
linux: $hoge
windos-cmd: %hoge%
windows-powershell: "env:hoge"
といった感じ。

MSBuild時のエラー対応

GetReferenceNearestTargetFrameworkTaskエラーが出る場合

こちら参照

developercommunity.visualstudio.com

要するにMSのBuildToolsを開いて
「Nuget targets and build tasks(ナゲットターゲットとビルドタスク)」にチェック入れて変更を押すだけ。

error MSB4226: "C:\Program Files (x86)...Microsoft.WebApplication.targets" が見つかりませんでした。

また先程のインストーラを開いて「Web開発ビルドツール」をチェックして変更。

まとめ

備忘録なので走り書きのような形になってしまいましたが、このような感じです。
抜け等ありましたらまた加筆・修正します。

現場からは以上です。

react-routerを使ったアプリケーションでURL直叩き(or F5)すると404になる

はじめに

こんにちは、だいきちです。
今回はreact-routerを使用し、serveを使ってローカルにサーバを立てた時
/以外のURLで404となってしまう現象について書きます。
恐らくタイトルだけ見て「ははぁ~ん?」となった方もいるでしょう
ですが、私は初学者ゆえわからず・・・
結果としては公式ドキュメントちゃんと読めよという話でした。(自戒

環境

  • create-react-app(CRA) : 2.1.3
  • react-router: 4.3.1
  • serve: 11.0

なぜ404?

この辺りを参照。
qiita.com

teratail.com

要するに、サーバ側にrewriteの設定が必要な訳ですね。
2つ目のQ&Aを見るとわかると思いますが、サーバ側が返しているのはあくまでindex.html
react-routerがURLに対応するコンポーネントを切り替えているだけなので、
URLにマッチするリソースは存在しません = 404となるわけですね。
なるほど、わかりやすい。
Reactって動的にindex.htmlを書き換えてるだけですもんね、仮想DOMを使って。
(間違ってたらスミマセン)

解決策

で、本題の解決策なんですが、ぶっちゃけるとserveでは解決してません。
serveのREADME見るとそれっぽいこと は書いてあるのですが
まず
create-react-appの公式ドキュメントにそれっぽいことは書いてないか?
という疑問が浮かんだので、調べると...
ありました
なになに...

If you use routers that use the HTML5 pushState history API under the hood (for example, React Router with browserHistory), many static file servers will fail.  
google様訳: HTML5 pushState history APIを内部で使用するルーター(たとえば、browserHistoryを持つReact Router)を使用すると、多くの静的ファイルサーバーが失敗します。


ですよねー

と、いうわけで下の方に行くと、Expressを使用した例が。
素直にExpressをインストールして使用しました。
npm install express --save
その後、プロジェクトルートにserver.jsを作成。
後は公式ドキュメントのソースをコピペ。

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'build')));

app.get('/*', function(req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(9000);

npm run build でアプリケーションをビルド。
node server.js でサーバ起動。http://localhost:9000に接続すれば
アプリケーションの起動が確認できると思います。
後はURLを直叩きしても404にならない優しい世界をご堪能下さい。

余談

先ほどserveでは実装しませんでしたが、やはりconfigっぽいのを定義すればいけるんじゃないでしょうか。
(下記参照。※検証はしていません。)
spectrum.chat

まとめ

最初にも書きましたが、公式ドキュメントは読みましょう。
もう一度言います、公式ドキュメントは読みましょう

現場からは以上です。

私が東京から岡山に移住(リターン)した理由

はじめに

だいきちです。
ふと思い立って書いてみようと思いました。
私が新社会人として東京に就職したのが約3年前。
そこから1年半ほど東京で働きました。
諸事情もあり、地元である岡山に転職を決め、リターンしてきました。
(詳細は後述)
そこで、2つの環境の違い等をまとめてみようと思ったわけです。
都会から地方への移住を検討している方の参考にでもなればいいかなと思います。

退職理由

続きを読む

2019年やりたいことリスト

はじめに

どうも、だいきちです。
2019年に入ってはや1ヶ月が過ぎましたが、皆さんいかがおすごしでしょうか。
ちと遅いかなとは思いますが、今年やりたいことを
自分の中でも忘れないように書き留めて置きたいと思います。

やりたいことリスト

続きを読む

React + TypeScript + Firebase でユーザ登録_その2

はじめに

前回からの続きです。

今回は主にfirebaseの認証処理を書いていきます。

リポジトリ

サンプルのリポジトリはこちら。
github.com

Firebaseとの接続設定

お待たせしました。
いよいよFirebaseとの接続設定です。

続きを読む

React + TypeScript + Firebase でユーザ登録_その1

はじめに

だいきちです。
最近、React + TypeScriptでアプリを作成しています。
その中でユーザ認証周りをFirebaseに任せたいなー
と思いまして、色々調べながら環境とサンプルを作成しました。
情報が古かったり、手順が不十分でわかりにくかったりしたので
GitHubでのサンプル公開と、手順解説をしてみようと思いました。
長いのでパートごとに分けています。

リポジトリ

サンプルのリポジトリはこちら。
github.com

続きを読む

WSL上でdocker-composeを使った時のvolumes指定(失敗)

はじめに

失敗してます(断言)
(暫定的な対応は行いましたが・・・)
なにかいい方法ないんですかねぇ・・・(困惑)

手順

手順もなにも、失敗しているんですが。
愚直に書くとこんな感じ?

version: '2'
services:
  gitlab:
    image: 'gitlab/gitlab-ce:latest'
    restart: always
    ports:
      - '10080:80'
    volumes:
      - '/srv/gitlab/config:/etc/gitlab'
      - '/srv/gitlab/logs:/var/log/gitlab'
      - '/srv/data:/var/opt/gitlab'

実際にはこのvolumesの指定方法だと
指定された箇所にはディレクトリは作成されません。
なぜかと言いますと、WSL内のディレクトリを指定しているのではなく、
ホスト(Windows側)のディレクトリを指定してしまっているのが原因のようです。*1
当たり前っちゃ当たり前なのかな?
調べてみること数十分
Windowsとdockerで共有しているドライブを指定する

あきらめる
という手段に行き着くことに(おいっ

*1:参考文献1を参照

続きを読む