部署前端專案方法（Docker，Nginx，IIS，Tomcat7，Nodejs）
阿新 • • 發佈：2018-12-26
根據前段時間的學習，整理如下前端專案部署方法。錯誤，不足及新的部署方式歡迎在評論區中留言與我討論。大家共同進步!(^_^)!
部署前端專案方法
通過 Docker-Nginx-supervisor 部署
在專案資料夾中新建 Dockerfile，內容如下：
FROM ubuntu:14.04
ADD sources.list /etc/apt/sources.list
RUN apt-get update && apt-get install -y curl wget tar bzip2 unzip vim && apt-get install -y Supervisor配置檔案
在專案資料夾中新建 Supervisor 配置檔案 supervisord.conf 如下：
[supervisord]
logfile = /tmp/supervisord.log
logfile_maxbytes = 50MB
logfile_backups=10 Nginx配置檔案
在專案資料夾中新建 Nginx 配置檔案 projectweb_nginx.conf 如下：
server {
listen 8088 default_server;
listen [::]:8088 default_server ipv6only=on;
root /usr/src/app;
index index.html index.htm;
client_max_body_size 15M;
client_body_timeout 600;
# Make site accessible from http://localhost/
server_name localhost;
# add_header 'Access-Control-Allow-Origin' '*';
location / {
# First attempt to serve request as file, then
# as directory, then fall back to displaying a 404.
try_files $uri /index.html;
# Uncomment to enable naxsi on this location
# include /etc/nginx/naxsi.rules
}
}阿里原始檔
在專案資料夾中新建 sources.list 檔案，內容如下：
deb http://mirrors.aliyun.com/ubuntu/ trusty main multiverse restricted universe
deb http://mirrors.aliyun.com/ubuntu/ trusty-backports main multiverse restricted universe
deb http://mirrors.aliyun.com/ubuntu/ trusty-proposed main multiverse restricted universe
deb http://mirrors.aliyun.com/ubuntu/ trusty-security main multiverse restricted universe
deb http://mirrors.aliyun.com/ubuntu/ trusty-updates main multiverse restricted universe
deb-src http://mirrors.aliyun.com/ubuntu/ trusty main multiverse restricted universe
deb-src http://mirrors.aliyun.com/ubuntu/ trusty-backports main multiverse restricted universe
deb-src http://mirrors.aliyun.com/ubuntu/ trusty-proposed main multiverse restricted universe
deb-src http://mirrors.aliyun.com/ubuntu/ trusty-security main multiverse restricted universe
deb-src http://mirrors.aliyun.com/ubuntu/ trusty-updates main multiverse restricted universe修改pip源
[global]
index-url = http://mirrors.aliyun.com/pypi/simple/
[install]
trusted-host=mirrors.aliyun.com構建映象
sudo docker build -t project/web:v1 .根據構建的映象執行容器
sudo docker run -d -p 8088:8088 project/web:v1開啟瀏覽器，在位址列輸入http://ip:8088
通過IIS部署
開啟IIS服務
控制面板->程式->啟動或關閉 Windows 功能->將 Internet Information Services 中的所有選項全部選中。
開啟IIS管理器
可以通過 Windows 搜尋程式（Win + Q）進行搜尋開啟。
新增一個新的網站，設定如下：
設定dist資料夾許可權
不設定許可權的話訪問被限制，無法訪問。
檢查網站是否正常開啟
在瀏覽器中輸入http://http://ip:8055檢視。
可能遇到的問題
HTTP 錯誤 500.24-Internal Server Error,檢測到在整合的託管管道模式下不適用的 ASP.NET 設定。
解決辦法：
選擇 projectweb 網站的應用池，單擊右側的“設定應用程式池預設設定”，然後把 啟用 32 位應用程式改為 True，託管管道模式改為 Classic。
通過Docker-Tomcat7+supervisor部署
在專案資料夾中新建Dockerfile，內容如下：
FROM ubuntu:14.04
ADD sources.list /etc/apt/sources.list
RUN apt-get update && apt-get install -y curl wget tar bzip2 unzip vim && apt-get install -y tomcat7 python-dev && \
apt-get install -y python-pip && apt-get clean all
COPY pip.conf /root/.pip/pip.conf
RUN pip install supervisor
WORKDIR /var/lib/tomcat7/webapps
COPY . /var/lib/tomcat7/webapps
ADD supervisord.conf /etc/supervisor/supervisord.conf
RUN mkdir -p /etc/supervisor.conf.d && \
mkdir -p /var/log/supervisor
COPY tomcat-users.xml /etc/tomcat7/tomcat-users.xml
ENV CATALINA_HOME /usr/share/tomcat7
ENV CATALINA_BASE /var/lib/tomcat7
ENV CATALINA_PID /var/run/tomcat7.pid
ENV CATALINA_SH /usr/share/tomcat7/bin/catalina.sh
ENV CATALINA_TMPDIR /tmp/tomcat7-tomcat7-tmp
RUN mkdir -p $CATALINA_TMPDIR
VOLUME ["/var/lib/tomcat7/webapps/"]
EXPOSE 8080
CMD ["supervisord","-n"]Tomcat配置檔案
在專案資料夾中新建 tomcat-users.xml 檔案，用於建立 Tomcat 使用者名稱密碼，內容如下：
<?xml version='1.0' encoding='utf-8'?>
<!--
Licensed to the Apache Software Foundation (ASF) under one or more
contributor license agreements. See the NOTICE file distributed with
this work for additional information regarding copyright ownership.
The ASF licenses this file to You under the Apache License, Version 2.0
(the "License"); you may not use this file except in compliance with
the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<tomcat-users>
<!--
NOTE: By default, no user is included in the "manager-gui" role required
to operate the "/manager/html" web application. If you wish to use this app,
you must define such a user - the username and password are arbitrary.
-->
<!--
NOTE: The sample user and role entries below are wrapped in a comment
and thus are ignored when reading this file. Do not forget to remove
<!.. ..> that surrounds them.
-->
<!--
<role rolename="tomcat"/>
<role rolename="role1"/>
<user username="tomcat" password="tomcat" roles="tomcat"/>
<user username="both" password="tomcat" roles="tomcat,role1"/>
<user username="role1" password="tomcat" roles="role1"/>
-->
<user username="admin" password="admin" roles="manager-gui"/>
</tomcat-users>阿里原始檔
在專案資料夾中新建 sources.list 檔案，內容如下：
deb http://mirrors.aliyun.com/ubuntu/ trusty main multiverse restricted universe
deb http://mirrors.aliyun.com/ubuntu/ trusty-backports main multiverse restricted universe
deb http://mirrors.aliyun.com/ubuntu/ trusty-proposed main multiverse restricted universe
deb http://mirrors.aliyun.com/ubuntu/ trusty-security main multiverse restricted universe
deb http://mirrors.aliyun.com/ubuntu/ trusty-updates main multiverse restricted universe
deb-src http://mirrors.aliyun.com/ubuntu/ trusty main multiverse restricted universe
deb-src http://mirrors.aliyun.com/ubuntu/ trusty-backports main multiverse restricted universe
deb-src http://mirrors.aliyun.com/ubuntu/ trusty-proposed main multiverse restricted universe
deb-src http://mirrors.aliyun.com/ubuntu/ trusty-security main multiverse restricted universe
deb-src http://mirrors.aliyun.com/ubuntu/ trusty-updates main multiverse restricted universe修改pip源
[global]
index-url = http://mirrors.aliyun.com/pypi/simple/
[install]
trusted-host=mirrors.aliyun.comsupervisor配置檔案
[inet_http_server]
port=*:9001
username=user
password=123
[supervisord]
logfile = /tmp/supervisord.log
logfile_maxbytes = 50MB
logfile_backups=10
loglevel = info
pidfile = /tmp/supervisord.pid
nodaemon = false
minfds = 1024
minprocs = 200
umask = 022
user = root
identifier = supervisor
directory = /tmp
nocleanup = true
childlogdir = /tmp
strip_ansi = false
[program:app-tomcat]
command = /usr/share/tomcat7/bin/catalina.sh run
autostart=true
autorestart=true
stdout_logfile=/var/log/supervisor/%(program_name)s.log
stderr_logfile=/var/log/supervisor/%(program_name)s.log
構建映象
sudo docker build -t project/web:v2 .根據構建的映象執行容器
sudo docker run -d -p 8080:8080 -p 9001:9001 project/web:v2開啟瀏覽器，在位址列輸入http://ip:8080
如想開啟supervisor網頁端管理介面，在位址列輸入
http://ip:9001，輸入使用者名稱密碼即可使用。
在Windows本地用Nodejs部署
安裝Nodejs
測試是否安裝成功
Nodejs 安裝完包含了 node 和 npm。
在控制檯輸入node -v npm -v，出現版本號則安裝成功。
更換npm源為淘寶源
npm 全稱 Node Package Manager，是 node.js 的模組依賴管理工具。由於 npm 的源在國外，所以國內使用者使用起來各種不方便，將其更換為淘寶源。
在控制檯輸入：
npm config set registry https://registry.npm.taobao.org配置後通過下面方式驗證是否成功：
npm config get registry或
npm info express開啟本地服務http-server
npm install http-server -g --registry=https://registry.npm.taobao.org安裝完成後，進入專案根目錄中執行以下程式碼，如圖所示：
>http-server
即部署成功，可通過圖片中地址訪問。
在Windows本地用Nginx部署
安裝Nginx
測試是否安裝成功
進入 Nginx 安裝目錄，輸入 nginx -V，出現版本號則安裝成功。
修改Nginx配置檔案
修改 Nginx 安裝目錄中的配置檔案 nginx.conf 如下：
可通過
error_page引數對 404 介面進行重定向，解決部署成功後重新整理介面出現 404 的問題。
啟動Nginx
進入 Nginx 安裝目錄，輸入：
>start nginx開啟瀏覽器，在位址列輸入http://127.0.0.1:8088
Nginx 重啟命令：
nginx -s reload
Nginx 關閉命令：nginx -s stop