前端项目部署到服务器上(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.conf文件的内容(这个项目的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;
    #}
}

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

去浏览器打开项目(服务器地址:端口)

以上部署成功!!!

相关推荐
y先森35 分钟前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy35 分钟前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu108301891138 分钟前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
sun0077001 小时前
ubuntu dpkg 删除安装包
运维·服务器·ubuntu
oi772 小时前
使用itextpdf进行pdf模版填充中文文本时部分字不显示问题
java·服务器
IT女孩儿2 小时前
CSS查缺补漏(补充上一条)
前端·css
贰十六2 小时前
笔记:Centos Nginx Jdk Mysql OpenOffce KkFile Minio安装部署
笔记·nginx·centos
吃杠碰小鸡3 小时前
commitlint校验git提交信息
前端
学Linux的语莫3 小时前
Ansible使用简介和基础使用
linux·运维·服务器·nginx·云计算·ansible