EC2にNginxサーバーを立てて、PHPが動くようにしてから、オレオレ証明書でhttps化をする
EC2にNginxサーバーを立てて、PHPが動くようにしてから、オレオレ証明書でhttps化をする
なんでオレオレ証明書?
Let's Encryptを試す前に、オレオレ証明書でサーバーを立ててみてからやろうと思ったから。
前提
- EC2サーバーを立てれる。
- linuxの事をなんとなく知っている。
早速開始
phpが動くようにする
EC2にphpとNginxをインストール
$ sudo yum install php71 php71-devel php71-fpm php71-mysql php71-mysqlnd php71-mbstring php71-pdo php71-zip $ sudo yum install nginx
設定ファイルを変更
/etc/php-fpm.d/www.conf
# 下のように変更する user = nginx group = nginx listen.user = nginx listen.group = nginx
/etc/nginx/conf.d/default.conf
DocumentRootは/home/ec2-user/www/publicにしました。
server { listen 80; server_name EC2のパブリックドメイン; root /home/ec2-user/www/public; location / { root /home/ec2-user/www; index index.html index.htm index.php; } location ~ \.php$ { root /home/ec2-user/www/public; fastcgi_pass unix:/var/run/php-fpm/www.sock; fastcgi_index index.php; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; include fastcgi_params; } }
誰でも見れるようにパーミッションの変更
$ sudo chmod 755 /home/ec2-user/
確認
いつものphpinfoの出力をするindex.phpを作って、
/home/ec2-user/wwwにindex.phpを置いて動作させてみる。
$ sudo service nginx start
ログの場所
何かエラーが出たらログを確認してみましょう。
$ sudo tail -f /var/log/nginx/error.log
403が出た時はパーミッションエラーの可能性があるので、www下のファイルの権限をチェック。
503の時は/etc/php-fpm.d/www.confのlistenと/etc/nginx/conf.d/default.confのfastcgi_passの内容が違うからかもしれないです。同じものにしないといけないとのこと。
/etc/php-fpm.d/www.confのlisten
; The address on which to accept FastCGI requests. ; Valid syntaxes are: ; 'ip.add.re.ss:port' - to listen on a TCP socket to a specific IPv4 address on ; a specific port; ; '[ip:6:addr:ess]:port' - to listen on a TCP socket to a specific IPv6 address on ; a specific port; ; 'port' - to listen on a TCP socket to all addresses ; (IPv6 and IPv4-mapped) on a specific port; ; '/path/to/unix/socket' - to listen on a unix socket. ; Note: This value is mandatory. listen = /var/run/php-fpm/www.sock <-- これ[f:id:Bee_Flim:20180322192006p:plain]
/etc/nginx/conf.d/default.confのfastcgi_pass
location ~ \.php$ { root /home/ec2-user/www/public; fastcgi_pass unix:/var/run/php-fpm/www.sock; <-- これ fastcgi_index index.php; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; include fastcgi_params; }
SSL and Http2の設定をする
sshキーの作成をする
sudo mkdir /etc/nginx/ssl cd /etc/nginx/ssl sudo openssl req -new -x509 -sha256 -newkey rsa:2048 -days 365 -nodes -out /etc/nginx/ssl/nginx.pem -keyout /etc/nginx/ssl/nginx.key
nginxの設定を更新
/etc/nginx/conf.d/default.conf
# 80 portで接続に来た場合、httpsへ転送する server { listen 80; server_name EC2のパブリックサーバー名; return 301 https://$host$request_uri; } server { # sslとhttp2を追記 listen 443 ssl http2; server_name EC2のパブリックサーバー名; root /home/ec2-user/www; # ssl keyを追加する ssl_certificate /etc/nginx/ssl/nginx.pem; ssl_certificate_key /etc/nginx/ssl/nginx.key; # 前方秘匿性の確立 ssl_ciphers ECDHE+AESGCM:DHE+AESGCM:HIGH:!aNULL:!MD5; # キャッシュ等の設定 ssl_session_timeout 5m; ssl_prefer_server_ciphers on; # httpAccessがあっても強制でhttpsにする add_header Strict-Transport-Security "max-age=15768000; includeSubdomains"; location / { root /home/ec2-user/www; index index.html index.htm index.php; } location ~ \.php$ { root /home/ec2-user/www; fastcgi_pass unix:/var/run/php-fpm/www.sock; fastcgi_index index.php; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; include fastcgi_params; } }
確認
chromeのエクステンションHTTP/2 and SPDY indicatorを入れて確認する。
TypeScriptとSASSを使うVue.jsの開発環境を作成する。
TypeScriptとSASSを使うVue.jsの開発環境を作成する。
前提
- nodeがインストール済みである。
- npmコマンドをなんとなく知っている。
- なんとなく、vue.jsを知ってる。(https://www.youtube.com/watch?v=mZY1yyrlJWUのシリーズを見ておくといいかも)
早速やる
ライブラリのインストール
sassはタグに設定するだけで使えるようになるので、TypeScriptだけインストールする。
# とりあえず、 vue-cliをインストールする $ npm i -g vue-cli # webpackペースのプロジェクトを作成する $ vue init webpack frontend_src # typescriptで必要なものをプロジェクトにインストール $ cd frontend_src $ npm install $ npm i -D typescript ts-loader vue-class-component
typescriptの設定
tsconfig.jsonファイルをfrontend_srcに作成して、下のように設定する。
{ "compilerOptions": { "experimentalDecorators": true, "allowSyntheticDefaultImports": true, "module": "es2015", "moduleResolution": "node", "noImplicitAny": true, "target": "es6", "lib": ["dom", "es6", "es2015.promise"] }, "include": [ "./src/**/*.ts" ] }
build/webpack.base.conf.jsを書き換える。
module.exports = { entry: { // エントリポイントの拡張子を.js→.tsに変更 app: './src/main.ts' }, output: { path: config.build.assetsRoot // ----- 略 ----- }, resolve: { // extensionsに'.ts'を追加 extensions: ['.js', '.vue', '.json', '.ts'], // ----- 略 ----- } // test: /\.js$/,の下あたりに追加する { test: /\.ts$/, loader: 'ts-loader', include: [resolve('src'), resolve('test')], options: { appendTsSuffixTo: [/\.vue$/] } }, // ----- 略 ----- }
jsファイルをtsファイルにする。
- ./src/main.js を ./src/main.ts
- ./src/router/index.js を ./src/router/index.ts に変更する。
Vueファイルで使用言語を指定する。
- src/App.vueとsrc/components/HelloWorld.vueのscriptタグにlang="ts"を追加する。
App.vue
<script lang="ts"> import Vue from 'vue' import Component from 'vue-class-component' @Component({ name: 'app' }) export default class App extends Vue { } </script>
HelloWorld.vue
<script lang="ts"> import Vue from 'vue' import Component from 'vue-class-component' @Component({ name: 'HelloWorld' }) export default class Hello extends Vue { msg = 'Welcome to Your Vue.js App' } </script> <style scoped lang="scss"> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; .test { font-size: 80px; } } a { color: #42b983; } </style>
build結果をAPサーバーのディレクトリにしたかったので、設定する
config/index.js
build: { // これを書き換える index: path.resolve(__dirname, '../../public/index.html'), // これも書き換える assetsRoot: path.resolve(__dirname, '../../public'), // 略 }
build出来るか試してみる
# サーバーが自動で立ち上がって画面が表示される。 $ npm run build
起動させてみる
# サーバーが自動で立ち上がって画面が表示される。 $ npm run dev
loaderでエラーになる場合
vue-cliでテンプレートを作成すると、webpack3.x系がインストールされるが、
ts-loaderは自前でインストールしているので4.x系がインストールされます。(2018/3)
ts-loader4.x系はwebpack4.x系で使ってね。webpack3.xで使いたいならts-loaderも3.x系を使ってとREADMEに書いてあるので、
package.jsonを編集して3.x系がインストールされるようにすると、コンパイルが通ります。
やってみて
コンパイルエラーが出てしまったところに詰まったけど、それ以外は結構すんなりできました。
RESTサーバーを作って、fetch apiを使ってデータ通信をしよう。 RESTじゃなくて、GraphQLがいいって話も聞くけど、とりあえずRESTだ。
BacklogでPR(Spring F/W)があったらJenkins(AWS)がコードレビューの一部をしてくれて、結果をSlackに通知してくれるようにする。~その7~
jenkinsの設定をする
jenkinsで各チェックが動くように設定をしていきます。
jenkinsにジョブを追加する。
1.jenkinsのダッシュボードを開く
2.新しいジョブをクリックして、適当な名前を付けて”Mavenプロジェクトのビルド”を選択する。
Git、Mavenの設定をする。
1.[jenkinsの管理]->[Global Tool Configuration]を選択する。
2.Gitの所にエラーがないか確認する。
3.Mavenの所に、適当に名前を付けて自動インストールにチェックをする。*1
Slack連携の為に設定をする。
1.[jenkinsの管理]->[システムの設定]を選択する。
2.webhook設定の所に、slackのtokenキーを設定して、
3.endpointにslackのURLを指定する。”https://[チーム名].slack.com”
ジョブの設定をする。
基本設定
- ダッシュボードに先ほど作ったジョブがあるので、選択する。
- 左のメニューにある[設定]を開く。
- プロジェクト名、説明を適当に設定する。
- Backlogにチェックを入れて、Backlog URLに"https://<スペースID>.backlog.jp/projects/<プロジェクトキー>"を設定する。
- ユーザー、パスワードはそのプロジェクトが見れるユーザーを指定する。(ブランクでも良い)
- APIキーには、前回Backlogの設定で取得したキーを設定する。
ソースコード管理の設定
- Gitを選択する。
- リポジトリURLにはbacklogのgitリポジトリを設定する。
- 認証情報の追加ボタンを押下して、種類に”ユーザー名とパスワード”を選択して、ユーザー名とパスワードにbacklogのアカウント情報を登録する。
- 認証情報に追加したアカウントが表示されるので、それを選択する。
- nulabさんのblog( Jenkins Backlog Pluginで、ビルド結果をプルリクエストに通知! | ヌーラボ )では、
高度な設定 > Refspec : “+refs/pull/:refs/remotes/origin/pr/”
を指定すると、プルリクエストが取れると書かれていたのですがプルリク時にうまく動かないので、その設定はブランクにしてビルドするブランチに**を指定することでプルリクエストがマージされたときに発動するようにしました。*2
pipelineの方には、プルリクエストを処理できるようになっているみたいで、今度試してみようと思います。
ビルドトリガの設定
- SCMをポーリングにチェックを入れます。
ビルド設定
- checkstyleやPMDなどのチェックを入れていく。
- 高度な設定を開いて、常に実行にチェックを入れる。
- 未解決タスクはテストコードを対象外にしたいので、パスを指定する。
ビルド後の処理
- JaCoCo、Slack Notification、Step Counterにチェックを入れる。
- Slack Notificationの高度な設定を開いて、"Team Subdomain"にチーム名を入れる。(”https://[チーム名].slack.com”のチーム名の部分)
- "Integration Token"にSlackのJenkinsCIで取得したトークンを設定する。
- "Project Channel"に通知をしたいchannelを指定する。
- 通知したいタイミングにチェックを入れる。
- Step Counterにはカウント対象のファイルを指定する。テストコードを除きたい場合は、除外するファイルパターンにテストコードのパスを指定する。
試してみる。
eclipseにテストコードを追加する。
こんな感じの適当な物を作成。
/* * ソースコード */ @SpringBootApplication public class DemoApplication { public static void main(String[] args) { SpringApplication.run(DemoApplication.class, args); } public int addCalc(int x, int y) { return x + y; } public int minusCalc() { //FIXME テストを修正する事 String bug = null; bug.toCharArray(); return 1; } public void sample() { //Some thing } }
/* * テストコード */ @RunWith(SpringRunner.class) @SpringBootTest(classes = DemoApplication.class) public class DemoApplicationTests { @Autowired DemoApplication demo; @Test public void 加算の成功テスト() { assertEquals("成功", 3, demo.addCalc(1, 2)); } @Test public void 加算の失敗テスト() { assertNotEquals("値が違う", 4, demo.addCalc(1, 2)); } @Test public void 加算の失敗テスト2() { assertEquals("値が違う2", 4, demo.addCalc(1, 20)); } @Test public void 加算の失敗テスト3() { assertEquals("値が違う3", 4, demo.addCalc(1, 20)); } }
Backlogにブランチをプッシュして、masterにプルリクエストを送信します。 そのあと、そのブランチをもう一度pushすると処理が走りました。
こんな感じで、実行結果が表示されました。
Slackにも通知が来るようになりました。
おわりに
一応、通知が来るようになったんですが、プルリクエストがあった時にチェックをしたいので、マージ時に実行されるのはいまいちですね。 デプロイする時にはこれでもよさそうな気がします。 pipelineを使うと、出来るようになるらしいので試してみます。
気になった事
ブランチをプッシュした後プルリクエストを送った後にそのブランチを更新しないと実行されないので、 実際の運用時に
”ブランチ作ったらとりあえずプッシュ、その後プルリクエストを送る前にプッシュしてもらう”
って運用が必要になるかと思いました。
BacklogでPR(Spring F/W)があったらJenkins(AWS)がコードレビューの一部をしてくれて、結果をSlackに通知してくれるようにする。~その6~
pom.xmlの設定をする
jenkinsで実行されるようにpom.xmlの設定を行います。
pluginの設定を行う
mavenの事をあまり知らないのですが、とりあえず下のように設定しました。
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.example</groupId> <artifactId>demo</artifactId> <version>0.0.1-SNAPSHOT</version> <packaging>jar</packaging> <name>demo</name> <description>Demo project for Spring Boot</description> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>1.5.9.RELEASE</version> <relativePath /> <!-- lookup parent from repository --> </parent> <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding> <java.version>1.8</java.version> <!-- checkstyleの定義ファイルの場所を指定する --> <checkstyle.config.location>config/checkstyle/google-checks.xml</checkstyle.config.location> </properties> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>com.h2database</groupId> <artifactId>h2</artifactId> <scope>runtime</scope> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> </dependencies> <build> <!-- checkstyleやらPMDとかの設定をする。 --> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-checkstyle-plugin</artifactId> <version>3.0.0</version> <executions> <execution> <phase>test</phase> </execution> </executions> <configuration> <violationSeverity>warning</violationSeverity> </configuration> </plugin> <plugin> <groupId>org.codehaus.mojo</groupId> <artifactId>findbugs-maven-plugin</artifactId> <version>3.0.0</version> <executions> <execution> <phase>test</phase> <goals> <goal>findbugs</goal> </goals> </execution> </executions> <configuration> <failOnError>true</failOnError> <xmlOutput>true</xmlOutput> <outputEncoding>UTF-8</outputEncoding> </configuration> </plugin> <plugin> <groupId>org.jacoco</groupId> <artifactId>jacoco-maven-plugin</artifactId> <version>0.8.0</version> <executions> <execution> <id>default-prepare-agent</id> <goals> <goal>prepare-agent</goal> </goals> </execution> <execution> <id>default-report</id> <goals> <goal>report</goal> </goals> </execution> </executions> </plugin> </plugins> </build> <reporting> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-checkstyle-plugin</artifactId> <version>3.0.0</version> </plugin> </plugins> </reporting> </project>
終わりに
mavenの事が全然わからなかったので、下の本を読んで勉強してこようと思います。
BacklogでPR(Spring F/W)があったらJenkins(AWS)がコードレビューの一部をしてくれて、結果をSlackに通知してくれるようにする。~その5~
Slackの設定をする
Jenkins CIのインストール
Slackのチームにログインして、Essential Apps等からJenkins CIを探してインストールする。
Jenkins CIの設定
1.Jenkins CIのConfigurationsを開く
2.通知をしたいchannelを指定して、Tokenの値が入っていることを確認する。
名前やアイコンとかは好きなものを設定する。
Slackの設定はこれで終わり。
slackの設定は楽でした。
違うchannelに通知したいときはAdd Configurationで同じように設定をしていけばいいみたいですね。
BacklogでPR(Spring F/W)があったらJenkins(AWS)がコードレビューの一部をしてくれて、結果をSlackに通知してくれるようにする。~その4~
Backlogの設定をする
APIキーの取得
1.Backlogの個人設定を開く。
2.APIを開いて、メモにコメントを入れて登録を押すと、下にAPIキーが作成される。
Webhookの設定
1.対象にしたいプロジェクトを開いて、プロジェクト設定を開く。*1
2.webhookを選択して、以下のように設定する。
- WebHook URL : http://
サーバ>/git/notifyCommit?url=<GitリポジトリのURL> - 通知するイベント : Gitプッシュ、プルリクエストの追加
Backlogの設定はこれで終わり
ここで設定したAPIキーを後でJenkinsで使用する。
参考サイト nulab-inc.com
*1:設定を行える権限が必要です。
BacklogでPR(Spring F/W)があったらJenkins(AWS)がコードレビューの一部をしてくれて、結果をSlackに通知してくれるようにする。~その3~
JenkinsをAWSにインストールする
AWSにJenkinsをインストール
- AWSのEC2を適当に作成します。(Amazon Linuxを使用しました)
- セキュリティグループで8080ポートにアクセスできるようにインバウンドに追加します。
- Backlogのwebhookが取れるように下もインバウンドに追加します。
カスタム TCP ルール TCP 8080-9999 54.238.59.48/32
4. Jenkinsでjavaを使用するのだが、javaが1.7なので1.8をインストールする
AWSにAWS作成時に作る秘密鍵とユーザー名:ec2-userでsshで入る。
sudo yum -y install java-1.8.0-openjdk-devel # インストールが行われる # java1.8をデフォルトにする $ sudo alternatives --config java 2 プログラムがあり 'java' を提供します。 選択 コマンド ----------------------------------------------- *+ 1 /usr/lib/jvm/jre-1.7.0-openjdk.x86_64/bin/java 2 /usr/lib/jvm/java-1.8.0-openjdk-1.8.0.25-0.b18.4.amzn1.x86_64/jre/bin/java Enter を押して現在の選択 [+] を保持するか、選択番号を入力します:2
5. java --verson で1.8であることを確認する。
$ java -version openjdk version "1.8.0_25" OpenJDK Runtime Environment (build 1.8.0_25-b18) OpenJDK 64-Bit Server VM (build 25.25-b02, mixed mode)
6. jenkinsをインストールする。
# Jenkinsをダウンロード sudo wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.org/redhat/jenkins.repo # パッケージ署名チェック用のキーをインポートする sudo rpm --import https://jenkins-ci.org/redhat/jenkins-ci.org.key # jenkinsのインストール sudo yum install jenkins
7. gitが入っていないのでインストールする。
sudo yum install git
8. jenkinsを起動する
sudo service jenkins start
起動されたら、http://public DNS:8080 にアクセスしてjenkinsの画面が立ち上がるのを確認する。
Unlock Jenkinsという画面が出るので、
sudo cat /var/lib/jenkins/secrets/initialAdminPassword
で表示されるパスワードをいれて、アンロックする。
推奨プラグインはインストールしてもらう。
[f:id:Bee_Flim:20180210150020p:plain] 7. jenkinsの起動設定をする
sudo chkconfig jenkins on
静的解析に必要なプラグインをJenkinsに入れる。
- FindBugs Plug-in - バグ解析用
- PMD Plugin - コピペコードのチェック
- DRY - コードの重複チェック
- checkstyle - コーディング規約チェック
- JaCoCo plugin - コードカバレッジの算出
- Task Scanner Plug-in - TODOの収集
- Jenkins Backlog Plugin - backlogのgitにアクセス
- Slack Notification Plugin - Slackへの通知
- StepCounter - ステップ数をカウントする
- JUnit Attachments Plugin
これらをインストールしていく。
jenkinsのインストールはこれで終了
他のサービスとの連携等の設定は、この後から行うので、とりあえず起動だけできればOK。