Docker部署前后端分离项目（二）前端

docker中部署前端项目

1、编译前端项目

npm run build

2、编译完后会生成disk目录，将disk目录复制到D:/tmp下，改名为orgmanagement-fe


3、在D:/tmp目录创建一个nginx的nginx.conf

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/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"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;
    
    proxy_redirect          off;
    proxy_set_header        Host $host;
    proxy_set_header        X-Real-IP $remote_addr;
    proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
    client_max_body_size    10m;
    client_body_buffer_size   128k;
    proxy_connect_timeout   5s;
    proxy_send_timeout      5s;
    proxy_read_timeout      5s;
    proxy_buffer_size        4k;
    proxy_buffers           4 32k;
    proxy_busy_buffers_size  64k;
    proxy_temp_file_write_size 64k;
    
    server {
        listen 6501;
        server_name  localhost;
        location  /  {
            root  /home/fn1/orgmanagement-fe;
            index  index.html;
        }
    }
}

4、拉取nginx镜像

docker pull nginx

5、创建nginx容器

docker run –d –it –v D:/tmp/nginx.conf:/etc/nginx/nginx.conf –v D:/tmp/orgmanagement-fe:/home/orgmanagement/orgmanagement-fe –p 6502:6501 --privileged --name orgmanagementfe nginx

-d, --detach=false， 指定容器运行于前台还是后台，默认为false
-i, --interactive=false， 打开STDIN，用于控制台交互
-t, --tty=false， 分配tty设备，该可以支持终端登录，默认为false
-v, --volume=[]， 将宿主机的目录挂载到容器的某个目录
-p, --publish=[]， 指定容器暴露的端口
–privileged=false， 指定容器是否为特权容器，特权容器拥有所有的capabilities
–name=""， 指定容器名字

6、在浏览器上输入http://localhost:6502

可以访问