端書 これは Nuxt.js を使ってポートフォリオサイトを作ったのを GitHub の履歴を見返しながらメモ的に書き起こしたものです。 割と詳細を忘れていてきちんと作業日誌付けておけばよかったと後悔…。とはいえ詰まった部分をかなり思い出したのでこれを読んだ方が同じ轍を踏まない&アドバイスをいただければ幸いです。 ちなみにスキルは React/Redux と Vue.js で経験あり。Nuxt.js や Firebase は初めてという具合です。 モチベーション 一介の Web エンジニアとしてこの度は転職活動を始めようと思い立ったのですが、自分の場合はプライベートの開発物が全く無かったのです。Qiita などの細々とあるアウトプットや職務経歴書だけではアピールが足りません。というわけで手っ取り早くアピールできる制作物としてまずはポートフォリオサイトを作ることにしました。 最終的な成果物
参考 https://circleci.com/docs/2.0/custom-images/ やりかた Dockerfileを作る ビルドしてDockerHubにアップロード 「.circleci/config.yml」にイメージを設定 実際にやってみる 1. Dockerfileを作る どんな言語でも良いですが、とりあえずGoでやってみます。 今回は「AWSで運用しているアプリで、CircleCI経由で自動デプロイをする」という 体のアプリを想定して書いてみました。 FROM golang:1.9 ADD . /go/src/github.com/your-repository WORKDIR /go/src/github.com/your-repository ENV DEBIAN_FRONTEND noninteractive # depを使っている場合 RUN go get -u
※ 12/19 以前、githubのアクセストークンの設定のところを自分のアカウントと書いてて、リンクしていただいた@chamaoさんの記事を見て、 「あっ」って、なったので文章を一部修正、スクリーンショットの追加をしました。 導入した理由 プロジェクトによって「この作業やった時は、必ず前に〜つけて」みたいなルールが違うところがあったり、覚えるのが大変。。。 「お前それ、あげる前にちゃんと動かした?」、「TODO残ってるんだけど???」みたいなことを逐一言うのは正直疲れるし、実装以外の部分の指摘をするためにコミット内容に目を通すのも時間がかかる。 少しでも「何か忘れてない?」チェックの負担を軽減できないかと思い、DengerFileと言うファイルで設定したルールの通りに自動チェックをしてくれる Dangerを導入をしてみた。 ※この記事は、CircleCI2.0が扱えると言う前提として書い
AWSとCircleCIの力を借りて、Nuxt.jsで作った静的サイトの運用をできるかぎり自動化した話です。 3ヶ月ほど前からCIのサービスを使うようになり、入門記事はたくさんあって助かったのですが、具体的にどんな感じで使っているかの情報が少なかったので記事にしました。 もしかしたら、CIの使い方が間違っているかもしれないので、そのときは優しくコメントをいただけたら嬉しいです。 できあがった流れ 毎朝10時にLambdaを起こしてデータの更新を行い、静的ファイルを再生成してからデプロイする流れになっています。 対象のサイト ざっくりAWSという、AWSの料金を日本円でざっくり計算できるサイトです。 Nuxt.jsで作成したものを、静的サイトとして生成して、AWSのS3にホスティングしています。 計算に必要なAWSの価格や為替は、毎朝10時に取得したものをS3にJSONで保存し、そのJSON
プログラミングのツールやサービスは便利なものが揃っているので Ruby の gem を作りながら紹介します。 Docker なので OS X, Windows, Linux で動作します。 gem は Ruby の外部ライブラリです。 すること、できること Docker の Ruby で gem をテスト駆動開発で作ります。 CircleCI や CodeClimate のサービスで自動テストをします。 GitHub や RubyGems にリリースした gem を使います。 GitHub の利用 GitHub はソースコードを管理するサービスです。 今回は my_gems という名前の gem を作るので my_gems のリポジトリを作ります。 リポジトリを作ると続きはターミナルでコマンドラインを使います。 git init コマンドで空の README を追加をして、git conf
references: defaults: &defaults macos: xcode: "X.X.X" working_directory: ~/project shell: /bin/bash --login -eo pipefail environment: TZ: "/usr/share/zoneinfo/Asia/Tokyo" LANG: en_US.UTF-8 LC_ALL: en_US.UTF-8 version: 2 jobs: build: <<: *defaults branches: only: - develop environment: FASTLANE_LANE: crashlytics_stg steps: - checkout: path: ~/project - run: name: Set Ruby Version command: echo "rub
はい。タイトルで察した方もおられると思います。やっていきましょう。 Travis.CIは最初にgit clone --recursiveでレポジトリをクローンするため、submoduleがすべて自動的にクローンされていきます。ただ、ここでgitのデータ転送プロトコルとしてsshを使用していると、秘密鍵はレポジトリに置かれていないのでログインに失敗し、結果クローンが失敗します。そしてバッジが赤くなります。 これを何とかする方法として、そもそも常にhttpsを使えばいいんじゃないのという話なんですが、既にgit@...でsubmoduleを登録してしまっているし、CIのことはCIでしたいので、travis.yml上で解決しましょう。 早速ですが解決方法です。以下のtravis.ymlを見て下さい。 この方は何をしているかというと、まずTravisがgit clone --recursiveしな
はじめに GithubでPull Requetを作成したら、masterにマージする前に自動でビルドされてテストやリンターが走ったら便利。実務ではデプロイツールと連携させたり、AWSやGCP、Slackなどと連携させたりしてさらに効率化を図るけど、ここではCircleCIだけをささっと導入する手順を書く。CircleCIで設定する環境と、実際にアプリを運用する環境をできるだけ合わせることがポイント。手軽に導入できて、設定もYAMLベースでできて簡単なので、CircleCIはとても良い。その他のCIツールとの比較記事はこちら 前提 Githubで管理しているRailsプロジェクトのリポジトリがある CircleCIのアカウントがある CircleCIとGithubを連携してある CircleCIのアカウントがなかったらCircleCIの公式サイトへ行ってサインアップ。CircleCIとGit
やりたいこと リモートプッシュ時に Firebase のデプロイコマンドを実行したい つまづいたこと CircleCI環境下で、firebase のコマンド実行につまづいた 解決法 CI環境下で、Firebase のデプロイをしたいので、firebase-toolsをインストールする必要があります。 最初に、グローバルでインストールしようとしましたが、CircleCI環境下では、それが許可されていません。(そりゃそうか) $ #!/bin/bash -eo pipefail npm install -g firebase-tools npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules npm ERR! path /usr/local/lib/node_modules npm ERR! c
はじめに gRPCではクライアントとサーバーのインターフェースを一致させる事ができますが クライアントとスタブのコード生成がずれると通信できなくなります。 また各言語向けのprotocol buffer compilerを環境構築するのは面倒です。 そこで諸々の環境が揃ったDockerイメージのnamely/protoc-allとCircleCIを組合せてコード生成を自動化します。 構成 以下の図とブランチ構成でコード生成の自動化を行います。 masterブランチ .circleci/config.yml docker-compose.yml protos/echo.proto Go用のgenerated/goブランチ C#用のgenerated/csharpブランチ また実際の試したものは以下のリポジトリに置いています。 https://github.com/shiena/grpc-ge
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに GitLab CI/CDとCircleCIの違いを比較する記事です。 GitLab CI/CDって何? GitLab has integrated CI/CD pipelines to build, test, deploy, and monitor your code Rated #1 in the Forrester CI Wave™ Forresterに認められたNo.1 CIサービス。 GitLab supports development teams with a well-documented installati
タイトル通りですが、CircleCIでng serve(Angular)が必要なCypressのテストをする方法です (ドキュメント少ないけどCypressって流行ってないのかなぁ) なぜそんなことをしたいのか jestとかでmock(のデータはあったほうがいいと思うが)を作って、そのmockにmockであることを振る舞わせるのはなんだかテストしているようでしていないような(jest.fn()とか) なんか操り人形を使うことも記述しないといけないのが面倒だし結構複雑になる。。(ごめんなさい初心者です) ので、実際にlocalhostを立ち上げて、ちゃんと振る舞うかテストするのがmockの振る舞いも記述しなくていいのでテストしやすいと思ったのが背景です TL;DR Cypressでヘッドレスなテストを行う CircleCI上でlocalhostを立ち上げる CircleCIでng serve
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く