nginx部署单页面应用以及使用 docker容器部署单页面应用

文章分为两部分：

part1. nginx 部署单页面应用 

part2. 使用docker 容器部署单页面应用

*****************分割线*****************

 

part1. nginx 部署单页面应用 

以下步骤以mac为例子，（window上文件目录略有不同，最重要记得windows文件目录路径需要转码以下 类似于 \ 转为 \\ 这样）

1， 下载niginx  ，没有brew 的先下载brew

brew install nginx

在此我有话要说， windows 下的话是一个 安装包全部搞定，mac下是nginx一共是三个目录下：

     1).  /usr/local/etc/nginx/  这个下面放置的是nginx.conf配置文件， 在此修改nginx的配置

      2).  /usr/local/var/www/ 此处放置前端打包好的文件

      3).  /usr/local/Cellar/nginx/ 此处才是nginx 真正的安装目录 不过不重要 

2， 打包前端项目  vue 和react 都行 

npm  run build 

3， 复制dist的内容到 /usr/local/var/www

4， 修改 /usr/local/etc/nginx/  的 nginx.conf 保存

#user  nobody;#nginx 服务启动用户
worker_processes  1;#工作线程数量

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
error_log  logs/error.log  debug; #error日志输出的位置及日志级别

#pid logs/nginx.pid;


events {
   debug_connection 111.0.12.122;
    worker_connections  1024;
}


http {
    include mime.types;#include指的是把mime.types 中的内容原样合并到该配置文件中
    default_type application/octet-stream;

	#日志格式
	log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

	#日志输出位置，注意：后面的main是固定的
    #access_log logs/access.log main;

    sendfile on;
    #tcp_nopush on;

    #keepalive_timeout 0;
	#连接超时时间
    keepalive_timeout 65;

    #gzip on;

	#server 必须在http中，一个http中可以有多个server站点
    server {
        listen 80;
        server_name localhost;

        #charset koi8-r;

        #access_log logs/host.access.log  main;

         location / {
                root   /usr/local/var/www;  # 根路径设置
                index  index.html index.htm; # 把index识别兼容多种情况
                try_files $uri /index.html index.html; # 单页面history模式，不怕刷新
            }
         location /api { #添加访问目录为/api的代理配置，代理服务proxy
         			proxy_pass   http://127.0.0.1:80;
          }



        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

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


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

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

}

5. 启动nginx， 访问http://localhost:80

nginx

6. 关闭命令为 

nginx -s stop

7. 重新加载配置 

nginx -s reload

*****************分割线*****************

part2. 使用docker 容器部署单页面应用

1， 下载docker 

brew install --cask --appdir=/Applications docker

如果 brew 过期了 使用 以下命令更新 

brew update-reset

2，在app中点击 鲸鱼图标，输入密码登录 

3， 使用命令下载nginx 

docker pull nginx

4， 在vue或react项目中添加nginx 文件夹，并且添加nginx文件夹下添加 default.conf ，内容如下 

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    access_log  /var/log/nginx/host.access.log  main;
    error_log  /var/log/nginx/error.log  error;

    location / {
        root   /usr/share/nginx/html; 
        index  index.html index.htm;
        try_files $uri /index.html index.html;
    }
    location /api { #添加访问目录为/api的代理配置
        proxy_pass   http://127.0.0.1:80;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

5. 在vue或react项目中添加Dockerfile，代码如下 

FROM nginx
COPY dist/ /usr/share/nginx/html/
COPY nginx/default.conf /etc/nginx/conf.d/default.conf

6.  使用命令打包创建 docker 镜像

docker build -t vuenginx .  

7. 使用命令以vuenginx镜像为基础创建容器 并运行

docker run -p 80:80 -d --name vueApp vuenginx

这个时候 就可以在宿主机的http://localhost:80访问部署的页面了 

8. 停止容器运行 

docker stop vueApp