前端项目部署到服务器上(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;
    #}
}

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

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

以上部署成功!!!

相关推荐
哟哟耶耶几秒前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo1 分钟前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v4 分钟前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
知孤云出岫5 分钟前
web 渗透学习指南——初学者防入狱篇
前端·网络安全·渗透·web
山东布谷科技官方8 分钟前
布谷直播源码部署服务器关于数据库配置的详细说明
运维·服务器·数据库·直播系统源码·直播源码·直播系统搭建·直播软件开发
yanwushu9 分钟前
Xserver v1.4.2发布,支持自动重载 nginx 配置
mysql·nginx·php·个人开发·composer
贩卖纯净水.10 分钟前
Chrome调试工具(查看CSS属性)
前端·chrome
爱吃喵的鲤鱼13 分钟前
linux进程的状态之环境变量
linux·运维·服务器·开发语言·c++
栈老师不回家1 小时前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙1 小时前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js