前端 dist 怎么打包成 tar docker 前端怎么打包部署

转载

晨曦微露s 2023-12-01 09:51:31

文章标签 前端 nginx vue.js html 服务器 文章分类 Docker 云计算

[从入门到入土(后端篇)]三,前端项目部署（nginx）

当本地项目没有问题后，我们需要将其部署到服务器上，让别人可以进行访问。

我所知道的方法有：

1.nginx部署
2.后端部署
3.oss部署

后端部署就比较简单，前端项目打包后直接给后端人员就行。所以我将写写怎么利用nginx部署和oss部署

这篇文章将讲解如何部署前端项目到nignx

一. 前端项目打包

执行命令行

npm run build

如果需要打包后，去掉项目中的console，需要在vite.config.js中添加如下代码

export default {
  plugins: [vue()],
  //打包设置
  build:{
    terserOptions: {
      compress: {
        // 用于删除生产环境中的console
        drop_console: true,}
    }
  }
}

运行完后，在项目目录有个dist文件夹，里面的内容就是打包后的文件。

2.利用xftp将打包后的文件放到服务器中

打开xshell 进入到自己的服务器，然后点击xftp传输

前端 dist 怎么打包成 tar docker 前端怎么打包部署_服务器

2.1 在服务器上的nginx/html 目录下新建demo(项目名称)文件夹
2.2 服务器（右侧）进入项目文件夹中，本地（左侧）选择assets文件夹和 index.html 右键传输，

前端 dist 怎么打包成 tar docker 前端怎么打包部署_服务器_02

这个时候前端项目打包后的文件就存在于nginx中，接下来就需要修改nginx的配置文件，将80端口的内容指向这个文件夹中的index.html

3.修改nginx配置文件

配置文件位置：

前端 dist 怎么打包成 tar docker 前端怎么打包部署_nginx_03

修改配置文件有两种方法：

1.直接利用vim在服务器修改
2.直接在本地修改后，替换服务器上的内容

两种方法都可以，就看大家的选择了。

贴一下我的配置文件内容（没有使用https协议）

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       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  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;
    server {
        listen       80;  #开启80端口
        server_name  awhtml.cn www.awhtml.cn; #域名信息
	rewrite ^(.*)$ https://$server_name$1 permanent;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        location / {
           root   html/awweb; #前端地址
 	   try_files $uri $uri/ @router;		
           index  index.html index.htm;
        }
        #跨域设置
	location /api{
	   rewrite ^.+api/?(.*)$ /$1 break;
           include uwsgi_params;
           proxy_pass http://127.0.0.1:3001; #后端地址
 	   proxy_set_header X-Real-Ip $remote_addr;
	   proxy_redirect off;
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
           proxy_set_header Host $host;
           proxy_set_header X-Real-Ip $remote_addr;
          proxy_set_header X-Ngnix-Proxy true; 
	}
        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        #error_page   500 502 503 504  /50x.html;
      
	#单界面应用，路由设置 
	location @router {
	   rewrite ^.*$ /index.html last;
	}
#	location = /50x.html {
#           root   html;
#        }
    }
}

简单的http就是这样，后面使用（https协议时，会再次修改）

需要注意的就是，跨域设置还有单页面应用的路由设置。如果有不懂得可以加群（433477676）或者自行百度，都不难