前端项目部署到服务器上（nginx）

我这个之前已经部署过项目，所以要进行这个操作

docker image


docker rm -f nginx  //用于强制删除名为“nginx”的容器


docker ps  //用于列出当前正在运行的Docker容器


docker volume -f


docker volume prune  //用于删除所有未使用的Docker数据卷，‌释放存储空间

上面操作完成，下面是对项目进行挂载：

docker run --name nginx -p 8001:8001 -p 8002:8002 -p 8080:80 
-v /usr/local/filesyetemweb/dist:/usr/local/filesyetemweb/dist -v /usr/local/informationerasureweb/dist:/usr/local/informationerasureweb/dist -v /home/nginx/:/etc/nginx/ -d nginx:1.24.0

对nginx进行配置（可配置多个项目）

nginx.conf文件

# user  nginx;
worker_processes  4;

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;# 开启gzip
    gzip_buffers 4 16k;# 设置缓冲区大小
    gzip_comp_level 6;#压缩级别官网建议是6，压缩级别(级别越高,压的越小,越浪费CPU计算资源)
    gzip_min_length 100;#允许被压缩的页面最小字节数
    gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/png;#压缩的类型
    gzip_disable "MSIE [1-6]\.";#配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持）
    gzip_vary on;#是否传输gzip标识
    gzip_http_version 1.1;# 使用 GZIP 压缩的最小 HTTP 版本

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;
}

conf.d文件里的default.conf(这个配置的默认nginx页面，这里的80挂载到8080)

server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;

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

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

conf.d文件里的informationerasure文件的内容（这个项目的8002挂载到8002），多个项目同理。

server {
    listen       8002;
    listen  [::]:8002;
    server_name  localhost;

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

    location / {
        root   /usr/local/informationerasureweb/dist;
        index  index.html index.htm;

	   # 这个非常重要，采用vue-router的时候，必须配置这个
        try_files $uri $uri/ /index.html;
    }

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

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

把前端打包好的项目上传到指定目录

去浏览器打开项目（服务器地址:端口）

以上部署成功！！！