我总结了以下两种方法可用
一、通过制作镜像，使用镜像生成docker 这个是比较常用的方法，制作镜像(images)后，如果还要生成docker可以直接使用镜像比较方便以下是操作步骤
1.创建目录 分别对应网站文件目录，日志目录，和配置文件目录
mkdir -p /home/OnlineBusiness/nginx_admin_docker/www /home/OnlineBusiness/nginx_admin_docker/logs /home/OnlineBusiness/nginx_admin_docker/conf.d
2.使用npm run build发布vue项目，并且上传到创建的文件目录，并且修改好nginx的配置文件conf.d目录下面的default.conf并且上传到conf.d目录，每个人的配置可能都不一样，以下是我的配置文件
server {
listen 80;
listen [::]:80;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
client_max_body_size 200m;
if (!-e $request_filename) {
rewrite ^/(.*) /index.html last;
break;
}
# To allow POST on static pages
error_page 404 /index.html;
error_page 405 =200 $uri;
# error_page 405 200 $uri;
}
location ~ /api/ {
proxy_set_header Host $http_host;
proxy_set_header X-Real-Ip $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
rewrite ^/api/(.*)$ /$1 break;
proxy_pass http://172.16.19.155:8004;
}
location ~ /admin/ {
proxy_set_header Host $http_host;
proxy_set_header X-Real-Ip $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
rewrite ^/(.*)$ /$1 break;
proxy_pass http://172.16.19.155:8030;
}
location ~ /WebApi/ {
proxy_set_header Host $http_host;
proxy_set_header X-Real-Ip $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
rewrite ^/(.*)$ /$1 break;
proxy_pass http://172.16.19.155:8030;
}
#access_log /var/log/nginx/host.access.log main;
}
View Code
3.编写dockerfile文件，说明：第一行：指定nginx的镜像来源，第二行：指定作者，第三行：删除默认的配置文件，第四行 添加本地的配置文件，第五行 复制项目文件到nginx目录
dockerfile文件不能带扩展名，放在根目录里面（我这里就是放在/home/OnlineBusiness目录下面）
FROM nginx
MAINTAINER rxyhj
RUN rm /etc/nginx/conf.d/default.conf
ADD conf.d/default.conf /etc/nginx/conf.d/
COPY www/ /usr/share/nginx/html/
4.创建镜像文件，在命令行下面，切换到dockerfile所在的文件夹，使用以下命令创建镜像文件
bash;gutter:true;
docker build -t 镜像名称:版本号</p>
<pre><code>
5. 使用镜像文件创建并启动容器,其中8002是本机使用的端口号，80是容器的端口，执行完命令后可使用本地IP加端口号访问
</code></pre>
<p>docker run --name=容器名称 -p 8002:80 -d 镜像名称:版本号</p>
<pre><code>
二、通过命令行的方法发布，该方法稍微麻烦一点，如果只发布一次可以使用该方法，操作步骤如下
1.新建一个默认的nginxdocker，其中nginx是本地已有的nginx文件，如果没有要先创建
</code></pre>
<p>docker run -id --name --restart=always -e TZ=Asia/Shanghai -d nginx -p 80:80 nginx</p>
<pre><code>
2.创建目录 分别对应网站文件目录，日志目录，和配置文件目录
</code></pre>
<p>mkdir -p /home/OnlineBusiness/nginx_admin_docker/www /home/OnlineBusiness/nginx_admin_docker/logs /home/OnlineBusiness/nginx_admin_docker/conf.d /home/OnlineBusiness/nginx_admin_docker/conf</p>
<pre><code>
View Code
3.复制默认nginx默认配置文件到配置文件目录，其中 de3bd9fcb694 是默认nginxdocker的容器Id,可以通过dokcer ps查看
</code></pre>
<p>docker cp de3bd9fcb694:/etc/nginx/nginx.conf /home/OnlineBusiness/nginx_test/conf
docker cp de3bd9fcb694:/etc/nginx/conf.d /home/OnlineBusiness/nginx_test/</p>
<pre><code>
4.停止默认配置nginx docker 其中 de3bd9fcb694 是默认nginxdocker的容器Id
</code></pre>
<p>docker stop de3bd9fcb694</p>
<pre><code>
5.删除默认配置 其中 de3bd9fcb694 是默认nginxdocker的容器Id
</code></pre>
<p>docker rm de3bd9fcb694</p>
<pre><code>
6.将发布后的vue项目上传到创建的网站文件目录，修改配置文件,如果有默认的配置文件，前面1,3,4,5步可以不需要，直接将配置文件复制到配置文件夹中即可
7.重新创建容器,并且指定容器的文件目录，日志目录、配置文件目录与本地的目录映射，映射后如果修改了本地对应目录的文件，重启容器后会同步过去
</code></pre>
<p>docker run -d -p 8200:80 --name shoppc --restart=always -e TZ=Asia/Shanghai -d -v /home/OnlineBusiness/nginx_admin_docker/www:/usr/share/nginx/html -v /home/OnlineBusiness/nginx_admin_docker/conf/nginx.conf:/etc/nginx/nginx.conf -v /home/OnlineBusiness/nginx_admin_docker/conf.d:/etc/nginx/conf.d -v /home/OnlineBusiness/nginx_admin_docker/logs:/var/log/nginx nginx</p>
<pre><code>
8.启动容器 shoppc为容器名称，也可以使用Id
</code></pre>
<p>docker start shoppc
9.修改nginx映射配置 -it参数表示分配一个伪终端 shoppc为容器名称 /bin/bash表示对容器执行bash操作,也可以在本地目录修改配置文件，然后重启容器也可以生效
1). docker exec -it shoppc /bin/bash // 进入容器内部
2). vim /etc/nginx/conf.d/default.conf // 修改nginx配置文件(如果vim命令不可用则需要安装执行以下命令安装 apt-get update (更新安装包源，否则可能无法运行vim的安装语句)，apt-get install vim 安装vim）
以上方法和步骤都经过亲自动手实践是可以走得通的，在此记录下来，以免以后不记得了
Original: https://www.cnblogs.com/ithome8/p/16665509.html
Author: IT之家
Title: vue项目发布到docker nginx的方法总结
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/591806/
转载文章受原作者版权保护。转载请注明原作者出处！