over 2 years ago

DEPLOY

passenger nginx

HTTP server:
Apache 跟 nginx 對static的網頁的支援比較好,也比較快,比較不佔資源。
不適合用在動態檔案,會傳到rails去處理
如果rails 沒有辦法處理,就跑404

DEPLOY完之後,用UNICORN,RAINBOW,PUMA,PASSENGER 會有watchdog去做process。如果人多,會開多一點process。人少會kill掉。

PASSENGER對新手比較簡單

00:04:00
gem install passenger
passenger 然後tab按兩下,會出現:

  1. passenger
  2. passenger-config
  3. passenger-install-apache2-module :可以裝在兩種http server上 - 老牌
  4. passenger-install-nginx-module :可以裝在兩種http server上 - 算新的,速度比apache快,不過每加一個外掛,就要重新compile一次。砍掉重來一次,或是蓋掉。
  5. passenger-memory-stats
  6. passenger-status

00:05:15
demo nginx

  1. 輸入passenger-install-nginx-module
  2. 一直按下一步
  3. 1 YES: download, compile and install Nginx for me.
  4. 選擇安裝的地方 /home/imroot/nginx 會出現permission denied,要用rvmsudo sudo跟rvm sudo (提權指令) 使用者沒有權限去動root的sudo

00:08:00
sudo ruby
會出現:[sudo] password for imroot:
sudo: ruby: command not found
rvmsudo ruby才可以動

所以要重打1: rvmsudopassenger-install-nginx-module

  1. 推薦的 /opt/nginx linux 的人喜歡用的: /usr/local/nginx 是sudo權限,所以可以灌到任何地方 JC用這個: /home/imroot/nginx

00:14:00
結束之後,有幾個地方最重要
A:

http{
    ...
    passenger_root /home/imroot/.rvm/gems/ruby-2.1-head/gems/passenger-4.0.50; (passenger的路徑)

    passenger_ruby /home/imroot/.rvm/gems/ruby-2.1-head/wrappers/ruby; (passenger要用的ruby的路徑)
    ...
}

00:16:00:要複製,不複製會出事
B:

server{
    listen 80;
    server_name www.yourhost.com;
    root /somewhere/public; #<--be sure to point to 'publi'!
    passenger_enable on;

}

00:17:00
根目錄下
nginx/conf/nginx.conf
(nginx的設定檔)
sudo vim nginx.conf
(因為是唯讀,所以要用sudo開)

這個應該已經設定好了:
A:

http{
    ...
    passenger_root /home/imroot/.rvm/gems/ruby-2.1-head/gems/passenger-4.0.50; (passenger的路徑)

    passenger_ruby /home/imroot/.rvm/gems/ruby-2.1-head/wrappers/ruby; (passenger要用的ruby的路徑)
    ...
}

server的地方是要動的地方:
C:

server {
    listen 80;
    server_name localhost;
    #charest koi8-r;
    #access_log logs/host.access.log main;
    location / {
    root html;
    index index.html index.htm;
    }
    #error_page 404 /404.html;
    #redirect server error pages to the static page /50x.html
    #
    error_page 500 502 503 054 /50x.html;
}

把B的這兩行貼在C裡面
然後改成

root /somewhere/public; #<--be sure to point to 'publi'!
passenger_enable on;

=>

root /home/imroot/shop/public ; #<--be sure to point to 'publi'!
passenger_enable on;

這個也可以刪掉

location / {
    root html;
    index index.html index.htm;
    }

00:19:00
要執行的時候
/nginx/sbin
sudo ./nginx 就是開啟
sudo ./nginx -s stop 是關掉

真正的主機位置是IP
如果錯誤的話,要看兩邊的log,一個nginx的,一個rails

先看rails 的錯誤
shop/log
tails -f production.log
然後重新整理網頁

在看nginx
/nginx/logs/vim error.log
Devise.secret_key was not set. please add the following to your Devise initializer:

所以要回去shop/config/initializers/devise.rb
config.secret_key的註解消掉

然後把nginx 重開一次

結果rails 的key又沒有
/shop/congif/secrets.yml

可以研究ruby secureramdom
require 'securerandom'
SecureRandom.hex(64)

00:25:00
產生之後,放回去/shop/congif/secrets.yml的最後一行:

production:
secret_key_base:放這裡

結果還是有問題,
回到rails去看
shop/log tail -f production.log
mysql2::Error (Access denied for user 'imroot'@'localhost' to database ('shop_production'))
要回去
``/shop/config/database.yml
這招偷來的,不要學:把development跟production的database打成同一個,客樣外部資料也可以啟動

development:
<<: *default
database :shop_development

production:
<<: *default
database :shop_production
username: imroot 改成root,上產品線的時候不能這樣
password: imroot

注意,絕對不要跟test打的一樣

00:28:00
重開rails而不重開nginx:用戶連線不會被中斷
passenger提供的方式:touch tmp/restart.text
192.168.11.46就可以用了

00:30:00
deploy最後的成果
ps-aux

00:32:00
在production模式下,如果去改檔案的話
再去重新整理網頁,是不會變動的
(在development模式下,refresh是會變動的)

所以在production模式下的時候,
要用touch tmp/restart.txt
網頁才會有變動

00:35:00
套用別人的模組
把別人的template 不要的code刪掉之後,
記得放<%= yiled %>
就會出現了

01:05:00
Hover之後,選項跟頁面同時在
class = "active"
這個地方很複雜

01:10:00
要把application.html.erb

<%= javascript_include_tag 'application'%>
<%= crsf_meta_tags %>

放到我們要的template裡面去
rails 的helper那些東西才能用

01:16:00
什麼是html

01:21:00
通常建議 <script src='/assets/jquery.js?body=1'></script>放在<body></body>的最下面
<style>CSS</style>則放在<head></head>裡面
因為,頁面要先出來後,再去觸發 javascript的event

01:25:00

jQuery(function($){ //ready的語法,先把這段code hold在記憶體內,等到body讀完之後,再去display,所以應該直接放在最下面就好了
    console.log('find_1*', $('#test')[0]);
})

就可以改成:console.log('find_1*', $('#test')[0]);
不需要ready(jQuery(function($){}))
javascript放在最上面還會佔用記憶體

01:28:00
開始講CDN:如果有一百張圖片,該怎麼抓 => BWOSER裡面的WORKER
一個domain name會有6-8個worker
domain name不一樣,就會有更多的worker,所以要切CDN

01:35:00
<img scr="wtf.png" title='cat' alt='cat'>
搜尋引擎跟機器人可以讀懂 title跟alt
把自己要用的東西這樣設定data-user-id='01'

01:47:00
不protocol連結
//192.168.11.46:3000
前面有兩的//
因為http跟https
一個沒加密,一個有加密

1:50:00
開始講CSS

可以寫成兩種格式
<link rel='stylesheet' href='hihi.css' media= "screen | print | both ">

或者是

<style>
body{
    
}

#id{
    
}
.class{
    
}

img.hihi.yoyo.logo#smile{
    要同時符合
}

</style>

1:56:00
<span>是文字區塊,可以跟別的東西並排
效果跟display:inline是一樣的

display:inline-block會變成圖片,
但是也可以跟文字同一行,文繞圖
變成圖片,所以可以設寬跟高

display:block,就是div(區塊)
會延展到底

所以都可以用span去做改變 inline, inline-block, block

2:04:00
開始講行高

<div class='head'>
    <span>im_title</sapn>
</div>
span{
    display:inline-block;
    background-color:#ccf;
    width:60px;
    height:60px;
    text-align:center;
}
.head , .head *{
    inline-height:60px;行高都設一樣,
    vertical-align:middle;然後置中對齊
}

02:08:00
講button:可以用一張圖做出多個button,可以減少worker數量

第一個button最好做

.button{
    display:inlone-block;
    background: url{/icons-390.jpg} no-repeat;
    width:130px;
    height: 130px;
    border:1px #ccc solid;
    margin: 10px;
    border-radius: 20px;
}
<span class='button button1'></span> 前面的當作主要的表述式,後面有數字的當作他的位移的動作
<a href="#"><span class='button button2'></span></a>
<span class='button button3'></span>
<span class='button button4'></span>
<span class='button button5'></span>
<span class='button button6'></span>

差異化

.button.button2{ background-position: -130px 0;}
.button.button3{ background-position: -260px 0;}
.button.button4{ background-position: 0 -130px;}
.button.button5{ background-position: -130px -130px;}
.button.button6{ background-position: -260px -130px;}

2:17:00
flukeout.github.io
CSS練習器

← RailsFun.tw 新手教學 day3 HD RailsFun tw 新手教學 day5 HD →