根据前段时间的学习，整理如下前端项目部署方法。错误，不足及新的部署方式欢迎在评论区中留言与我讨论。大家共同进步!(^_)!

部署前端项目方法

通过 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 nginx python-dev && \
   apt-get install -y  python-pip && apt-get clean all
COPY pip.conf /root/.pip/pip.conf
RUN pip install supervisor
WORKDIR /usr/src/app
COPY . /usr/src/app
ADD supervisord.conf /etc/supervisor/supervisord.conf
RUN mkdir -p /etc/supervisor.conf.d && \
    mkdir -p /var/log/supervisor
RUN echo "daemon off;" >> /etc/nginx/nginx.conf
RUN ln -s /usr/src/app/projectweb_nginx.conf /etc/nginx/sites-enabled
EXPOSE 8088
CMD ["supervisord","-n"]

Supervisor配置文件

在项目文件夹中新建 Supervisor 配置文件 supervisord.conf 如下：

[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:nginx-app]
command = service nginx start
autostart=true
autorestart=true
stdout_logfile=/var/log/supervisor/%(program_name)s.log
stderr_logfile=/var/log/supervisor/%(program_name)s.log

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://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.com

supervisor配置文件

[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

通过官网地址 https://nodejs.org/en/ 下载。

测试是否安装成功

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

通过官网地址 http://nginx.org/en/download.html 下载后解压。

测试是否安装成功

进入 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