日別アーカイブ: 2022年4月7日

ポートフォリオをデプロイしたときのEC2の設定2(EC2+RDS+NGINX+Puma)

その1から続いています

16:GithubとSSHを接続するために鍵を作成

※EC2内で行います。(sshコマンドで接続してからだよ)

cd ~/.ssh

ssh-keygen -t rsa

例としてrsa_portfolioで作成

17:設定ファイルを作成

vim config

#以下を記述してセーブ

ここから==========================
Host github

  Hostname github.com

  User git

  IdentityFile ~/.ssh/rsa_portfolio

ここまで==========================

18:公開鍵を登録する

#公開鍵をコピーして控えておく一番うしろの部分はコピーしなくて良い
cat rsa_portfolio.pub

#Githubで公開鍵を登録
①GitHubにアクセスして自分のアイコンからSettingsをクリック
②SSH and GPG keysをクリック
③SSHkeyを登録する(rsa_portfolio.pub)

19:GitHubとSSH接続する

chmod 600 /home/newuser/.ssh

ssh -T github

#エラーで接続できなかった時に試します(接続できたらやらなくていいいです)
chmod 744 config

20:GitHubからクローンしてbundlerをインストールします

GitHubにてデプロイしたい自分のリポジトリのCode→SSHからコピーして

git clone git@github.com:newuser/アプリ名.git

gem install bundler -v '2.0.2'

21:gemをインストールします

cd アプリ名/

bundle install --path vendor/bundle

#エラーが出た場合バージョンを合わせる

Gemfile.lockの最下段bの BUNDLED WITH のバージョンと合わせる(例:1.16.6)

#ディレクトリは〜で行う

cd ~
gem install bundler -v '1.16.6'
bundle install --path vendor/bundle

#エラーでrmagikがインストール出来ないときのコマンド 

sudo yum -y install ImageMagick 
sudo yum -y install ImageMagick-devel
bundle install --path vendor/bundle
yarn install

22:nginxをインストールする

sudo amazon-linux-extras install nginx1

#インストールできたか確認
nginx -v

23:アプリ名.confの設定(Nginx)

sudo vim /etc/nginx/nginx.conf
#以下をコピーして貼り付けます

user nginx;
worker_processes auto; 
error_log /var/log/nginx/error.log; 
pid /run/nginx.pid; 
# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic. 
include /usr/share/nginx/modules/*.conf; 
events { 
worker_connections 1024; 
} 

http { 
log_format main '$remote_addr - $remote_user [$time_local] "$request" ' 
                '$status $body_bytes_sent "$http_referer" ' 
                '"$http_user_agent" "$http_x_forwarded_for"'; 

access_log /var/log/nginx/access.log main; 

sendfile on; 
tcp_nopush on; 
tcp_nodelay on; 
keepalive_timeout 65; 
types_hash_max_size 4096; 

include /etc/nginx/mime.types; 
default_type application/octet-stream; 

# Load modular configuration files from the /etc/nginx/conf.d directory. 
# See http://nginx.org/en/docs/ngx_core_module.html#include 
# for more information. 

include /etc/nginx/conf.d/*.conf; 
gzip on; 
gzip_http_version 1.0;
gzip_proxied any; 
gzip_min_length 500; 
gzip_disable "MSIE [1-6]\."; 
gzip_types text/plain text/xml text/css 
           text/comma-separated-values 
           text/javascript application/x-javascript 
           application/atom+xml; }

24:nginxの設定をする

cd /etc/nginx/conf.d/ 
sudo vim アプリ名.conf

#以下をすべてコピーして貼り付けます
# log directory
error_log /var/www/LifeHack-Tools/log/nginx.error.log; #自分のアプリケーション名に変更
access_log /var/www/LifeHack-Tools/log/nginx.access.log; #自分のアプリケーション名に変更
# max body size
client_max_body_size 4G;

upstream app_server {
# for UNIX domain socket setups
server unix://var/www/LifeHack-Tools/tmp/sockets/puma.sock fail_timeout=0; #自分のアプリケーション名に変更
}

server {
listen 80;
server_name suzutuki-portfolio.com; #自分のElasticIP
# nginx so increasing this is generally safe...
keepalive_timeout 5;
# path for static files
root /var/www/LifeHack-Tools/public; #自分のアプリケーション名に変更
# page cache loading
try_files $uri/index.html $uri.html $uri @app;
location @app {
# HTTP headers
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_redirect off;
proxy_pass http://app_server;
}
# Rails error pages
error_page 500 502 503 504 /500.html;
location = /500.html {
root /var/www/LifeHack-Tools/public; #自分のアプリケーション名に変更
}
}

25:Nginxの再起動

#Nginxの再起動
sudo nginx -s reload

cd /var/www/アプリ名/
git pull origin master

26:pumaの設定をする

#pumaディレクトリがないときはmkdir /var/www/アプリ名/config/pumaで作成する
cd /var/www/アプリ名/config/puma/
sudo vim production.rb
#ここからコピーだよ↓

# bind "unix://#{Rails.root.join('tmp/sockets/puma.sock')}"だとpumactlコマンドで読み込まないため絶対パスで指定

root_dir = '/var/www/アプリ名'

max_threads_count = ENV.fetch('RAILS_MAX_THREADS', 5)

min_threads_count = ENV.fetch('RAILS_MIN_THREADS', max_threads_count)

threads min_threads_count, max_threads_count

worker_timeout 60

bind "unix://#{root_dir}/tmp/sockets/puma.sock"

environment 'production'

pidfile File.expand_path('tmp/pids/server.pid')

stdout_redirect File.expand_path('log/puma_access.log'), File.expand_path('log/puma_error.log'), true

# workerの数は適宜変更する。指定しない場合はsingle modeとなるが、指定した場合はcluster modeとなる。

plugin :tmp_restart

27:pumaの起動

cd /var/www/アプリ名

git pull origin master

bundle exec rails s -e production

28:エンドポイントの確認

まずはAWSを開き、RDSのメニューからデータベースを選択して

エンドポイントをコピーします。

29:Credentialの設定

cd /var/www/アプリ名/config

touch master.key

chmod 600 master.key

vim master.key

#ローカルにあるmaster.keyの中身をコピーして貼り付け
# 自分で作成したアプリのconfigにmaster.keyがある
# GitHubにはないので注意

30:Credentialに書き込み

cd /var/www/アプリ名

EDITOR="vi" bin/rails credentials:edit
# エラーでできない場合はこちらを試す
EDITOR='vi' bundle exec rails credentials:edit

usernameは設定からわかる。passwordはわからなくなったら変更できる。

db: 

  endpoint: ******************** #先程コピーしたエンドポイントをコピー

  user_name: ***** # マスターユーザー名

  password: ****** # RDS作成した時に作ったパスワード

# Used as the base secret for all MessageVerifiers in Rails, including the one protecting cookies.

secret_key_base: *********** #ここは特に手を加えずにそのままで

31.database.ymlの編集

ローカルでdatabase.ymlの設定
先ほどのcredentialsに記載された情報にアクセスするには Rails.application.credentials.db[:endpoint]という書き方をする必要があり、これを利用してproduction環境用のDBに関して定義。

config/database.yml

default: &default

  adapter: mysql2
 
  encoding: utf8mb4

  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>

  username: root

  password: password

  socket: /tmp/mysql.sock

  host: db

development:

  <<: *default

  database: アプリ名_development

production:

  <<: *default

  database: アプリ名_production

  adapter: mysql2

  charset: utf8mb4

  host: <%= Rails.application.credentials.db[:endpoint] %>

  username: <%= Rails.application.credentials.db[:user_name] %>

  password: <%= Rails.application.credentials.db[:password] %>

32:変更した差分を反映

cd /var/www/アプリ名/
git pull origin master

33:DBの作成とmigrate

bundle exec rake db:create RAILS_ENV=production

bundle exec rake db:migrate RAILS_ENV=production

#環境の設定
export RAILS_ENV=production

34:アセットプリコンパイル

bundle exec rake assets:precompile RAILS_ENV=production

35:ブラウザで確認する

http://ElasticIPアドレス

期待していた通りになっていたらOKです。

36:本番環境でもちゃんと動いているか確認します。

レイアウトが崩れていないか

エラーが発生しないか確認します。

ポートフォリオについて備忘録

途中まで進めていたポートフォリオについて書き込み

scssの注意点aplication.scssにこのようにインポートする

このようなディレクトリ構造で開発する

このようにインポートして変数を使うようにする(でないとエラー)

jsファイルも記述して配置する

headerの作成

header.scssを以下の記述にする

@import "variables";
@import "mixin";
@import "base";
// headerの設定担当
.header {
// 画面の上部に固定
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: $navHeight;
// 背景色を透明に
  background-color: transparent;
  display: flex;
  align-items: center;
// ヘッダーを最前面にくるようにする
  z-index: 100;

&.triggered {
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 10px 0 25px -10px rgba(0, 0, 0, 0.5);
}

// スマホ画面ではヘッダー表示しない
&__nav {
  display: none;
}

&__ul {
  display: flex;
// 上下中央揃えにする
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

&__li {
  margin-left: 20px;

& > a {
  color: $cBlack;
  text-decoration: none !important;
// すべて大文字にする
  text-transform: uppercase;
 }
}

& .logo {
  font-size: 38px;
  justify-content: center;
}

&__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
// navとコンテンツのラインを同じにする
  @extend .content-width;
 }
}

基本的にスタイルがおかしいと気づいたときは検証を使ったほうが

圧倒的に早く問題解決できるのですること!

jsのroot-marginの設定でうまくアニメーションされないことがあるので気をつけること!

スタイルで参考になりそうなサイトを見つけて使ったほうが良い