服务器网站部署

服务器网站部署

第一步 后端项目打包

# 使用IDEA中的Maven工具将当前项目打包
# 届时你会获得一个jar包
# 在项目的target目录下
# 如下图

第二步 将vue项目进行打包

# 在vue项目目录下使用控制台输入如下命令
npm run build

# 如下图会生成以下目录

注意：nginx自动识别html文件，所以需要创建一个文件夹，存储vue打包后的文件，方便nginx调用，关系到你的网站是否能够成功访问到

第三步 配置Nginx

# 解压nginx
tar -zxvf [包名] -C [输出路径]

# 进入到输出路径
cd [输出路径] 

# 一下需要对别自己的配置文件去改，主要是ip地址，端口的设置，添加字符集，添加基础的映射路径与文件格式和访问路径
# 配置开始
server {
        listen       80;
        server_name  192.168.3.111;
        charset utf-8;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   /server/vue/dist;
            index  index.html index.htm;
        }

		# 反向代理的跨域配置（解决前端跨域问题方法之一）
        location ^~ /api/ {
            rewrite   ^/api(.*)$ $1 break;
            proxy_pass http://192.168.3.111:8080;
        }
# 配置结束
   
# 在进入nginx的输出路径
cd [输出路径]

# 创建一个nginx编译文件存储的文件夹
mkdir [编译文件名称] # 这里的路径自己要记住下面会用到
# 安装命令执行
./configure  --prefix=[编译文件路径]
   
# 开始编译
make && make install

# 进入到编译好的路径中查看是否存在 sbin 文件夹
cd sbin
# 启动nginx
./nginx
   
# 开放nginx的80
# 方案网址	https://www.panziye.com/java/web/1450.html
# 执行如下指令查看所有已经开启的端口
firewall-cmd --list-ports
#如果什么也没有需要放开80端口

# 执行如下命令开启80端口
firewall-cmd --zone=public --add-port=80/tcp --permanent

# 开启后需重启防火墙才生效，执行如下指令重启防火墙
firewall-cmd --reload
# 如果出现 80/tcp说明成功了

第四步 测试

# 在游览你其中使用自己的IP访问网页
192.168.3.111:80