前端打包文件本地简易部署

按照难易程度叙述。无论插件还是软件，安装一次，后续就能直接使用，前端必备。把启动命令放在了第一步，每次就看对于方式开头即可

使用插件live server部署项目

启动

方式一：打好的包的index.html右键，点击open with live server。默认浏览器会打开打包好的页面。默认端口：5500

方式二：命令行工具,命令进入html文件的目录，启动服务器：http-server

安装

此方式适用于，临时看打好包的效果。vscode中搜索插件Live Server安装。

修改端口

打开命令窗口输入settings,点击open workspace settings。输入理想端口即可

使用nginx部署项目

启动

nginx目录下

常用命令(window版本)

启动：start nginx(也可双击exe。注意观察任务管理器，避免重复启动)
重启： nginx -s reload
停止： nginx -s stop

安装

官网下载，将打包文件放入文件夹html下

修改端口

打开nginx配置文件nginx.conf，查看端口简单nginx配置

js 复制代码

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

    #gzip  on;

  add_header Access-Control-Allow-Origin *;
  add_header Access-Control-Allow-Headers X-Requested-With;
  add_header Access-Control-Allow-Methods GET,POST,OPTIONS;

server{
    listen 8083;
    server_name 127.0.0.1;
    root html;
    index index.html login.jsp;
    add_header Cross-Origin-Opener-Policy same-origin;
    add_header Cross-Origin-Embedder-Policy require-corp;

    location ~ .*\.(js|css|htm|html|gif|jpg|jpeg|png|bmp|swf|ico|rar|zip|exe|txt|flv|mid|doc|ppt|pdf|xls|mp3|wma|woff|woff2)$ {
        root html;
    }

    location / {
      try_files $uri $uri/ /index.html;
    }

 }

}

使用服务器(tomcat或其他服务器)部署

优势可以部署前端包，后端包。

启动

进入bin目录，双击startup.bat启动项目

安装

官网下载，将打包文件放入文件夹webapps/ROOT下

修改端口

修改端口server.xml。查看端口为80。访问http://localhost:80