本篇配置不在docker內(nèi)實現(xiàn)build惊橱，而是外部build
1. 根目錄創(chuàng)建Dockerfile文件
FROM nginx
COPY ./build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
2. 根目錄創(chuàng)建nginx.conf文件
server {
server {
listen 80;
# gzip config
gzip on;
gzip_min_length 1k;
gzip_comp_level 9;
gzip_types text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml;
gzip_vary on;
gzip_disable "MSIE [1-6]\.";
root /usr/share/nginx/html;
location / {
try_files $uri $uri/ /index.html;
}
# 后臺服務器地址
location /v1/ {
proxy_pass http://127.0.0.1:8088/v1/;
}
}
nginx鏡像有一個默認的配置文件 default.conf
默認的配置有一個問題, 在非首頁的路由頁面刷新就會報404錯誤
我們使用 react-router 作為路由管理蟹但，在開發(fā)端的express服務器下運行和測試表現(xiàn)均正常显歧，部署到線上的nginx服務器后铛嘱，還需要對該應用在nginx的配置里作相應調(diào)整绳矩，否則瀏覽器將不能正常刷新锦针，表現(xiàn)為頁面不顯示或頁面跳轉(zhuǎn)錯誤等異常弟蚀。原因在于這些react應用在運行時會更改瀏覽器uri而又不真的希望服務器對這些uri去作響應拌消，如果此時刷新瀏覽器挑豌，服務器收到瀏覽器發(fā)來的uri就去尋找資源，這個uri在服務器上是沒有對應資源墩崩，結(jié)果服務器因找不到資源就發(fā)送403錯誤標志給瀏覽器氓英。所以，我們要做的調(diào)整是：瀏覽器在使用這個react應用期間鹦筹，無論uri更改與否铝阐，服務器都發(fā)回index.html這個頁面就行。
3. 執(zhí)行命令
- 進入項目根目錄铐拐，先build
npm install
npm run build
- docker構(gòu)建鏡像
docker build -t my-image .
- 根據(jù)鏡像創(chuàng)建容器
docker run --name custom-image --net=host -d -p 80:80 my-image
4. 測試鏡像
打開瀏覽器徘键，訪問 localhost:80。出現(xiàn)如下頁面表示工作正常遍蟋，測試通過吹害。
