部署前端代码nginx的配置

334 阅读2分钟

要部署代码,就得先连接上服务器,需要下载xshell这个软件,通过服务器的账号密码去连接上服务器,就可以开始配置nginx的配置啦。
先看看nginx配置的命令行:

没有权限进入文件夹操作可执行命令获取超级权限:sudo su
nginx的配置文件nginx.conf路径:/usr/local/nginx/conf/nginx.conf
通过vim编辑器去编辑配置文件: vim nginx.conf
server {
    listen  8093; // 监听端口号
    server_name  localhost; // 最终可以访问的地址或localhost
    #root   /home/flatform/dist/; // 可以省略
    #index  index.html index.htm; // 可以省略
    #charset koi8-r;
    #access_log  logs/host.access.log  main;
    location / { // 浏览器输入地址回车直接显示/home/flatform/dist/路径下的index.html
        root   /home/flatform/dist; // 前端代码所放置位置
        index  index.html index.htm;
        try_files $uri $uri/ /index.html; // history路由必须加上这句
        add_header Access-Control-Allow-Origin *;
    }
    location /api/ { // 与本地项目代码配置一样,都是使用/api/去代理跨域
        proxy_pass http://10.10.208.83:8093; // 请求接口的地址
        rewrite /api(.*) $1 break;
    }
}
配置好之后判断端口号是否被占用:sudo netstat  -anp  | grep   端口号
检查nginx配置是否正常,nginx是否运行成功:
先进入nginx文件夹cd /usr/local/nginx/sbin 然后执行./nginx -t
出现ok和success则成功运行nginx
启动nginx: 先进入nginx文件夹cd /usr/local/nginx/sbin 然后执行start nginx
重启nginx: 先进入nginx文件夹cd /usr/local/nginx/sbin 然后执行./nginx -s reload

1,连接上服务器
通过xshell软件连接上服务器,知道服务器的账号和密码即可。
2,新建文件夹存放前端代码
我是在/home路径下新建了一个文件夹flatform,通过nginx的“mkdir +文件夹名”的命令新建文件夹,把打包压缩的前端代码存放在这里并解压出来,解压出来就是一个dist文件。
所以我的前端页面的root根目录的路径其实是/home/flatform/dist/index.html;
3,配置nginx
存放好前端代码之后就可以去配置nginx,然后启动或者重启nginx就可以了访问了。
进入nginx的配置文件nginx.conf,路径:/usr/local/nginx/conf/nginx.conf,通过vim编辑器去编辑配置文件: vim nginx.conf。
编辑内容如下,你可以是新加一个端口号来监听,或者是修改之前的:

server {
    listen  8093; // 监听端口号
    server_name  localhost; // 最终可以访问的地址或localhost
    #root   /home/flatform/dist/; // 可以省略
    #index  index.html index.htm; // 可以省略
    #charset koi8-r;
    #access_log  logs/host.access.log  main;
    location / { // 浏览器输入地址回车直接显示/home/flatform/dist/路径下的index.html
        root   /home/flatform/dist; // 前端代码所放置位置
        index  index.html index.htm;
        try_files $uri $uri/ /index.html; // history路由必须加上这句
        add_header Access-Control-Allow-Origin *;
    }
    location /api/ { // 与本地项目代码配置一样,都是使用/api/去代理跨域
        proxy_pass http://10.10.208.83:8093; // 请求接口的地址
        rewrite /api(.*) $1 break;
    }
}

注意:
1,history路由必须加上这句:try_files $uri $uri/ /index.html;;
2,前端代理,nginx也要添加上对应的代理,比如/api/;
4,判断端口号是否被占用
配置好之后判断端口号是否被占用:sudo netstat -anp | grep 端口号
5,检查nginx配置是否正常,nginx是否运行成功
先进入nginx文件夹cd /usr/local/nginx/sbin ;然后执行./nginx -t;出现ok和success则成功运行nginx。
6,重启nginx
先进入nginx文件夹cd /usr/local/nginx/sbin ;然后执行./nginx -s reload
7,在浏览器访问
在浏览器输入你的服务器地址加端口号回车即可,我当前的是http://10.10.220.147:8089

nginx常用命令

解压命令: unzip dist.zip
上传命令: rz
下载命令: sz + 文件名
创建文件夹命令: mkdir + 文件名
创建文件命令:touch + 文件名
删除文件命令: rm -f +文件名
删除文件夹命令: rm -rf + 文件名
获取文件绝对路径命令: pwd
查看版本信息命令: --version
更改文件名: mv xx yy

jar启动:nohup java -jar ROOT.jar > log.out 2>&1 &

查看Java进程:ps -ef|grep java