TIS ENGINEER NOTE

27才文系出身フリーランスエンジニアのブログ

プログラミング

sinatraでミニマムなWebサービスを公開してみるよ【sinatra + nginx + puma + Capistrano】

更新日:

sinatraとはRubuで作成されたWebフレームワークです。かなりシンプルな構成ですので、Ruby自体の勉強用としてはRailsより向いているかも知れません。

今回はRailsを使うまでもない小規模なWebサイトを作成する機会がありましたので、sinatra + Puma + nginxの構成で公開し、Capistranoでデプロイできるようになるまでを作業をまとめてみました。

Rubyのインストール・公開サーバーの準備等は完了している前提で進めていきます。

作業PCでの作業

まずは開発用のローカル環境下での作業から。

今回はポートフォリオサイトを作るので、アプリケーション名はportfolioです。

まずはディレクトリを作成し、そのディレクトリに移動。その後bundle initでGemfileを生成します。

そして作成されるGemfileの最後にsinatraを追加します。

保存したら、以下のコマンドでvendor/bundle配下にgemをインストールします。ローカル環境は極力汚さない。

これでローカル開発環境自体は完成となります。

動作確認のために、Rubyファイルを作成し、修正します。

ひとまずはRubyファイルから直接表示します。最終的にはviewファイルを読み込むように修正します。

そしてsinatraを起動。

起動されたらブラウザからhttp://localhost:4567/にアクセスしてみましょう。

上記のようにmain.rbに記載した内容が表示されていればOKです。

Gitの初期設定

なにはともあれソースを書いたらバージョン管理。Gitの初期設定を行います。

以降のコマンドは基本的にアプリケーションディレクトリ(今回であればportfolio)配下で実行します。

使用しているPCで初めてGitを使用する場合

git init

アプリケーションディレクトリでgit initします。これでportfolio配下がGitによってバージョン管理される対象となります。

gitignoreを設定

git上にアップしたくないファイルを設定します。今回はvendor/bundle配下とbundlerのconfigはアップしないようにします。

add & commit

リモート設定

Gitリポジトリサービスの登録は済ませておいてください。

Bitbucket,GitHubなりお好みのサービスをどうぞ。

登録しているサービスでリポジトリを作成するとリモート設定のコマンドが表示されますので、そちらを実行しましょう。基本的には以下のような形です。

以上でバージョン管理の設定は完了です。長丁場ですね。コーヒーでも飲んで一休みしましょう。

サーバーへの配布準備

サーバーに公開するだけなら、作成したファイルをサーバーにコピーしてWebサーバーの準備をするだけですが、それだけだと変更を加えた時に、いちいちコピーし直さなければなりません。それって結構手間になります。

プログラマーは怠惰であれの言葉に則り、Capistranoというツールを使って、自動デプロイを実現しておきます。

Gitリポジトリにpushしたソースを公開サーバーにコピーするという処理をCapistranoにやってもらう流れです。

Webサービスの構築などについては下記サイトを参考に進めました。Railsでの例ではありますが、ディレクトリの設定などは同様に進めることが可能です。Rails、DBの設定の部分などは今回スキップしてしまって構いません。

http://qiita.com/eiei19/items/7c08d358c82cb538def0

まずはGemfileに下記を追加し、bundle installしましょう。

インストールが完了したら、下記コマンドでCapistranoの初期設定を行いましょう。

コマンドを実行して生成されたCapfileに以下のコマンドを追加しましょう。

更にconfig/deployファイルも生成されているので、こちらに配布用のコードを書いていきます。

あとは今回アプリケーションをPumaで動かすので、config.ruをアプリケーションディレクトリに作成しておきます。

ここまで完了したら下記コマンドで配布実行。

権限によってはwww配下にディレクトリが作れないよ!と怒られることもあるので、その場合はサーバーにアクセスし、直接作成しておきましょう。

エラーが発生したり、修正を行った時はリポジトリへのpushを忘れないようにしましょう。特にGemfileを修正した時などは、pushしてから再リトライしないと反映されないので要注意!

正常に終了したら、デプロイは完了です。

nginxの設定

これでアプリケーションが動く仕組みはできましたが、実際にインターネットからアクセスされた時にアプリケーションに繋げる仕組みができていませんので、nginxの設定を行います。nginxのインストールや基本的な設定は上で紹介した記事を参考にしてみてください。

今回は設定ファイルの例だけ書いておきます。

設定を記述し終わったら、nginxを起動、または再起動します。

これで実際にサーバーのドメインまたはIPにアクセスすれば作成したsinatraアプリケーションが表示されます。

これからモリモリカスタマイズしていこうと思います。

閲覧いただき、ありがとうございました。

よく読まれている記事

エンジニア独立

2018/2/25

エンジニアがキャリアアップするための3つのテクニック

こんにちは、フリーランスエンジニアのてぃすです。 エンジニアという職業の中でも高収入とライフワークバランスを実現して充実した人生を送っている人もいれば、低い給料と長時間労働で疲弊しきっている人もいます。 僕も半年前まではエンジニアという職業を見限ってしまおうかと真剣に考えるほど、残念な状況にいました。 しかしこのまま終わってしまうのは悔しいと思い一念発起して行動を起こし、半年の間に月収を3倍以上あげることに成功しました。自分言ってて胡散臭い話ですが、実体験です。 キャリア向上を目指した行動の中には、意識し ...

続きを読む

エンジニア独立

2018/2/28

パーソルテクノロジースタッフの派遣でエンジニア歴2年の僕が時給2000円を余裕で超えた話

今いる会社を辞めることとなり、今後のエンジニアとしての身の振りを検討中のてぃすです。 今回とある派遣会社にて、業務経験なしのRuby on Railsの案件を紹介してもらい、その時給が2000円を超えていました。 月給換算したら1,2年目の正社員の給与を余裕で超えてきます。派遣という働き方の印象がガラッと変わる体験をしました。 今回はエンジニア歴2年の僕にそんな素敵な待遇を提供してくれたパーソルテクノロジースタッフについて、実体験を交えて語っていこうと思います。 エンジニア派遣の「パーソルテクノロジースタ ...

続きを読む

エンジニア入門

2018/8/17

現役エンジニアからみたProEngineerの『エンジニアカレッジ』について

こんにちは、フリーエンジニアのてぃすです。 最近、 どうすればエンジニアになれるのか エンジニアになるためにどんな勉強をしたの? といった質問を受けることが多くなってきました。 エンジニアは高稼働のブラック職業であるという印象も薄れてきて、効率よく稼げる職業としての側面に気付き始めた方が増えてきたということでしょう。 とはいえ全くの未経験からITエンジニアに転向するというのは独学の場合、不可能ではありませんが、かなり難易度の高い挑戦であると言えます。たとえ独学で成し遂げたとしても、よっぽど運がよくない限り ...

続きを読む

エンジニア独立

2018/2/13

文系出身エンジニアが語る「弱いエンジニア」戦い方

こんにちは、フリーランスエンジニアのてぃすです。 僕は文系大学を卒業し、新卒で入ったITコンサル会社で入社半年後に軽くC#を扱う機会が訪れるまで、プログラミングやエンジニアリングに触れたことが一度もありませんでした。 パソコンも基本的に動画を見たりゲームをするための便利な箱くらいな印象。 一方、エンジニア業界には中学生時代から趣味でプログラミングをしてきたり、理系大学でバリバリ情報系を学んできたエンジニアがゴロゴロいるわけです。こいつらもう機械語で会話すればいいのにと思うレベルの猛者揃いです。 そうなると ...

続きを読む

エンジニア独立

2018/8/17

プログラマーの働き方比較【正社員 vs 派遣 vs フリーランス】

最近ではエンジニアの需要が激増し、特にプログラマーを目指す人が増えてきました。 今の時代、プログラマーを目指すというのはかなり賢い選択です。1年ちょっとの現場経験を積めばあっという間にサラリーマンの平均年収を超えることが可能です。 その一方で、世間ではプログラマーの不遇が叫ばれていたり、IT土方などの蔑称で呼ばれていたりします。 それは働き方の選択を誤っているプログラマーがあまりに多いことが原因となっています。 稼げる市場であるということは、依頼主と技術提供者の間の利益を掻っ攫おうとするハイエナが多く存在 ...

続きを読む

-プログラミング
-,

Copyright© TIS ENGINEER NOTE , 2019 All Rights Reserved Powered by AFFINGER5.