docker 安装 ngix vue

2024-03-30 21:05:09

获取 nginx 镜像

docker pull nginx

docker 镜像名称由REPOSITORY和TAG组成 [REPOSITORY[:TAG]]，TAG默认为latest

docker run -p 80:80 --name nginxtest nginx

创建目录挂载

在宿主机创建持久化 conf--配置目录 html--静态网站目录 logs--日志目录

mkdir -p /root/docker-root/nginx-mcyl/conf
mkdir -p /root/docker-root/nginx-mcyl/html
mkdir -p /root/docker-root/nginx-mcyl/logs

将容器内的nginx.conf与default.conf文件分别拷贝到主机/mnt/nginx与目录/mnt/nginx/conf下，分别执行

docker cp ef:/etc/nginx/nginx.conf ./  

dokcer cp ef:/etc/nginx/conf.d/default.conf ./conf/

ginx.conf并没有在etc/nginx/conf目录下。

主机中的文件nginx.conf挂载到容器的nginx.conf

将服务器的配置文件挂载到容器中，这样我们修改配置文件会方便一些。

退出nginx容器，将容器中的文件nginx.conf先拷贝到宿主机中，conf.d目录下的 default.conf 文件拷贝出来

docker cp nginxtest:/etc/nginx/nginx.conf /root/docker-root/nginx-mcyl/conf/backnginx.conf

将容器中/etc/nginx/nginx.conf文件 复制到宿主机的/root/docker-root/nginx-mcyl/conf目录下，并命名为backnginx.conf

docker cp nginx-mcyl-vue:/etc/nginx/conf.d/default.conf /root/docker-root/nginx-mcyl/conf/conf.d/default.conf

执行docker stop ef命令停止刚刚创建的nginx容器，ef是容器Id，然后执行docker rm ef移除容器，

创建容器

docker run  --name nginx-mcyl -d -p 80:80 -v /root/docker-root/nginx-mcyl/conf/nginx.conf:/etc/nginx/nginx.conf -v /root/docker-root/nginx-mcyl/conf/conf.d:/etc/nginx/conf.d -v /root/docker-root/nginx-mcyl/logs:/var/log/nginx -v /root/docker-root/nginx-mcyl/html:/usr/share/nginx/html --network my-net nginx

-v /root/docker-root/nginx-mcyl/conf/nginx.conf :/etc/nginx/nginx.conf

/root/docker-root/nginx-mcyl/conf/nginx.conf 宿主机中的ngix配置文件挂载到容器的 /etc/nginx/nginx.conf 配置文件

-v /root/docker-root/nginx-mcyl/conf/conf.d:/etc/nginx/conf.d

/root/docker-root/nginx-mcyl/conf/conf.d 宿主机中的配置目录 conf.d 挂载到容器的 /etc/nginx/conf.d 目录上

命令，重新创建nginx容器

这样就可以将配置文件、log、静态页面映射到宿主机中。需要修改或者查看直接在宿主机中修改或者查看就可以了。需要注意的是，配置文件虽然映射到宿主机中，但是如需配置路径，还需配置成容器中的路径。

vue 使用 Dockerfile 生成镜像

把 vue 生成的 dist目录下的文件上传到服务器

/root/docker-root/vue-mcyl-src

文件目录 dist 目录 Dockerfile 文件

转到此目录下

cd  /root/docker-root/vue-mcyl-src

使用下面的命令生成镜像

docker build -t mcyl-vue:v1.0 .

......
Successfully built a3c1ccffb08a
Successfully tagged mcyl-vue:v1.0

启动容器

docker run  --name nginx-mcyl-vue -d -p 80:80 -v /root/docker-root/nginx-mcyl/conf/nginx.conf:/etc/nginx/nginx.conf -v /root/docker-root/nginx-mcyl/conf/conf.d:/etc/nginx/conf.d -v /root/docker-root/nginx-mcyl/logs:/var/log/nginx -v /root/docker-root/nginx-mcyl/html:/usr/share/nginx/html --network my-net mcyl-vue:v1.0

docker run -d mcyl-vue:v1.0

conf.d 目录下的配置文件 default.conf

server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;
    #server_name 192.168.1.98
	
    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;
    
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }
    
    #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;
    }
   location /api/ {
             #mcyl_test0 容器名称 反向代理到 后台服务 
             #proxy_pass http://mcyl_test0:8080/;
			proxy_pass http://192.168.1.98:8080/; #反向代理 宿主机的ip地址 web端口号
     }
    # 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;
    #}
}

其他命令

修改配置文件重启nginx容器
docker exec -it nginx service nginx reload

查询docker中nginx容器的日志的前10行
docker logs --tail="10" nginx

docker容器中安装vim（如果下载不下来，需要配置下国内镜像）
apt-get update
apt-get install vim

码农公寓