docker+nginx部署vue项目记录

892 阅读2分钟

docker+nginx部署vue项目

进入服务器,找个地方创建一个目录用于存放部署配置和文件,这里创建了一个/project/appTest/nginx的空文件夹

image-20221114112624337.png

拉取nginx镜像,如果已经拉过了忽略这一步
docker pull nginx
创建一个容器,这个容器用于拷贝配置文件,用完可以删除
docker run --name nginxtem -d -p 8090:8090 nginx
把nginx容器中的配置文件拷贝到当前目录(此时在/project/appTest/nginx目录下),当然你也可以把以前用过的配置复制过来,就不需要前面创建个容器拿配置了
docker container cp nginxtem:/etc/nginx .
运行完之后/project/appTest/nginx目录下就会多出一个nginx文件夹,把这个文件夹改一下名字,改为conf,(因为这里面放的都是配置文件,为了好理解,改一下名)
mv nginx conf
/project/appTest/nginx目录下创建两个文件夹,分别命名为html、logs

image-20221114093623532.png

这个时候就可以把之前创建的临时容器删除了
docker ps                   查看运行的容器
docker stop id              停掉某个id的容器
docker rm id                删除某个id的容器
再创建一个容器,并映射
docker run --name nginxtest -p 8090:8090 -v /project/appTest/nginx/html:/usr/share/nginx/html -v /project/appTest/nginx/logs:/var/log/nginx -v /project/appTest/nginx/conf:/etc/nginx -d nginx
修改一下/conf/nginx.conf
user nginx;
worker_processes auto;
​
error_log /var/log/nginx/error.log notice;
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;
  server {
    listen 8090;
    server_name _;
    location / {
      root /usr/share/nginx/html;
      index index.html;
    }
  }
​
  include /etc/nginx/conf.d/*.conf;
}
把打包好的文件放到html文件夹下面;(打包生成的dist文件夹下面的文件)

image-20221114114337833.png

最后重启一下,就发布完了
docker restart nginxtest

如果还需要发布其他项目,就再来一次,修改容器名和端口号;

如果是阿里云服务器,记得把端口加入安全组