docker 配合nginx部署vue项目

一、打包vue项目

npm run build

二、docker网上拉取nginx镜像

docker pull nginx

三、vue项目打包文件放到服务器上，创建 dockerfile（参考第八点，将nginx配置文件放置在宿主机，通过dockerfile复制到镜像指定文件）

[root@VM-12-13-centos vue]# mkdir dockerHRSass

[root@VM-12-13-centos vue]# cd dockerHRSass/

[root@VM-12-13-centos vue]# touch dockerfile

[root@VM-12-13-centos dockerHRSass]# ls

dist dockerfile

四、编写dockerfile

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

五、生成镜像

# 在目录内命令

docker build -t hrsass-nginx(镜像名称) .

六、运行容器

docker run --name=hrsassNginx(容器名称) --restart=always -p 0.0.0.0:6888:6888 -d hrsass-nginx(上一步设置的镜像名称)

　docker run --name=hrsassNginx --restart=always -p 0.0.0.0:6888:6888 -d hrsass-nginx

七、此时，通过浏览器可以预览到页面

 

 

 但是，接口请求都请求到前端服务器，需要配置代理进行转发解决问题

八、配置docker中Nginx代理

1、进入Nginx容器

docker exec -it hrsassNginx bash

2、容器里面需要安装Vim

apt-get update   #这个命令的作用是：同步 /etc/apt/sources.list 和 /etc/apt/sources.list.d 中列出的源的索引，这样才能获取到最新的软件包。
apt-get install -y vim

3、查看Nginx配置文件

cd etc/nginx         #进入Nginx目录
cat nginx.conf       #查看配置文件

 

 

 引入了conf.d文件夹下面所有以 conf 结尾的配置文件，我们在 conf.d 下面新建一个自己的配置文件

4、在 conf.d 下配置 hrsass.conf 文件

cd /etc/nginx/conf.d    #进入上图红色框中的目录
cp default.conf hrsass.conf   # 复制得到一个 hrsass.conf 文件       
vim hrsass.conf.     #vim进入编辑该文件

5、配置代理

server {
    listen       6888;
    server_name  localhost;

    #charset koi8-r;

    #access_log  logs/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    location /prod-api/ {
        proxy_pass http://ihrm-java.itheima.net/api;
    }

    #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; 
    #} 
}

6、重启docker容器