柚子快報(bào)邀請(qǐng)碼778899分享：運(yùn)維 nginx部署前端教程

http://yzkb.51969.com/

目錄

一、前言二、部署三、注意四、參考

一、前言

一般來(lái)說(shuō)現(xiàn)在的軟件項(xiàng)目，都是分用戶端以及管理端的，并且是前后端分離的，這里我來(lái)記錄一下部署兩個(gè)前端的教程。

部署前端之前需要的準(zhǔn)備工作是部署springBoot后端程序，這里我docker compose來(lái)對(duì)后端程序進(jìn)行部署

詳細(xì)教程可以參考： docker compose部署springboot+redis+mysql

這里我的后端接口地址為http://127.0.0.1:8888/

另外還需在服務(wù)器上安裝nginx，安裝nginx的教程不在這里敘述，詳細(xì)可以參考： centos安裝nginx

準(zhǔn)備還以上的工具就可以繼續(xù)往下走了

二、部署

打包之前，需要注意的是，為了解決跨域問(wèn)題 ，vue可以反向代理請(qǐng)求后端接口

部分代碼如下： vue.config.js文件

const { defineConfig } = require('@vue/cli-service')

const { VantResolver } = require('unplugin-vue-components/resolvers');

const ComponentsPlugin = require('unplugin-vue-components/webpack');

module.exports = defineConfig({

//配置代理

devServer: {

host: '0.0.0.0',

port: 8080,

proxy: {

//標(biāo)識(shí)

'/api': {

// 需要訪問(wèn)的地址

target: 'http://自己服務(wù)器的IP+端口',

// 開啟websocket 代理

ws: true,

// 開啟代理

changeOrigin: true,

// 路徑重寫

// api是我們寫的它可以事任意值 比如我們?cè)陂_發(fā)環(huán)境 VUE_APP_BASE_API = '/api'

// 但是實(shí)際開發(fā)接口沒有拼接api 我們就可以通過(guò)路徑重寫在真實(shí)發(fā)送請(qǐng)求的時(shí)候把/api = 空

// 也可以根據(jù)實(shí)際開發(fā)場(chǎng)景，改成其他值 '^/api' : '/其他值' 進(jìn)行接口請(qǐng)求

pathRewrite: {

'^/api': ''

}

}

}

},

})

接口請(qǐng)求一定要加上/api

代碼如下：

let base = '/api'

export const postRequest = (url, params) => {

return axios({

method: 'post',

url: `${base}${url}`,

data: params

})

}

export const getRequest = (url, params) => {

return axios({

method: 'get',

url: `${base}${url}`,

data: params

})

}

完成以上反向代理就可以進(jìn)行打包操作了

使用以下命令:

npm run build

生成dist文件

這里我有兩個(gè)前端，分別將文件重命名為manage（管理端）、user（用戶端）

并上傳都服務(wù)器的目錄/usr/local/nginx/html/下

然后編輯/usr/local/nginx/conf目錄下的nginx.conf文件

cd /usr/local/nginx/conf/

vi nginx.conf

文件內(nèi)容如下:

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

#第一個(gè)前端

server {

listen 80;

server_name 管理端域名;

#charset koi8-r;

#access_log logs/host.access.log main;

location / {

root html/manage;

index index.html index.htm;

}

#配置方向代理的后端接口

location /prod-api/ {

proxy_pass http://127.0.0.1:8888/;

proxy_redirect off;

proxy_set_header Host $host;

proxy_set_header X-Real-IP $remote_addr;

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

proxy_set_header Cookie $http_cookie;

# for Ajax

#fastcgi_param HTTP_X_REQUESTED_WITH $http_x_requested_with;

proxy_set_header HTTP-X-REQUESTED-WITH $http_x_requested_with;

proxy_set_header HTTP_X_REQUESTED_WITH $http_x_requested_with;

proxy_set_header x-requested-with $http_x_requested_with;

client_max_body_size 10m;

client_body_buffer_size 128k;

proxy_connect_timeout 90;

proxy_send_timeout 90;

proxy_read_timeout 90;

proxy_buffer_size 128k;

proxy_buffers 32 32k;

proxy_busy_buffers_size 128k;

proxy_temp_file_write_size 128k;

}

error_page 500 502 503 504 /50x.html;

location = /50x.html {

root html;

}

}

#第二個(gè)前端

server {

listen 80;

server_name 用戶端域名;

#charset koi8-r;

#access_log logs/host.access.log main;

location / {

root html/user;

index index.html index.htm;

}

#配置方向代理的后端接口

location /api/ {

proxy_pass http://127.0.0.1:8888/;

proxy_redirect off;

proxy_set_header Host $host;

proxy_set_header X-Real-IP $remote_addr;

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

proxy_set_header Cookie $http_cookie;

# for Ajax

#fastcgi_param HTTP_X_REQUESTED_WITH $http_x_requested_with;

proxy_set_header HTTP-X-REQUESTED-WITH $http_x_requested_with;

proxy_set_header HTTP_X_REQUESTED_WITH $http_x_requested_with;

proxy_set_header x-requested-with $http_x_requested_with;

client_max_body_size 10m;

client_body_buffer_size 128k;

proxy_connect_timeout 90;

proxy_send_timeout 90;

proxy_read_timeout 90;

proxy_buffer_size 128k;

proxy_buffers 32 32k;

proxy_busy_buffers_size 128k;

proxy_temp_file_write_size 128k;

}

error_page 500 502 503 504 /50x.html;

location = /50x.html {

root html;

}

}

# another virtual host using mix of IP-, name-, and port-based configuration

#

#server {

# listen 8000;

# listen somename:8080;

# server_name somename alias another.alias;

# location / {

# root html;

# index index.html index.htm;

# }

#}

# HTTPS server

#

#server {

# listen 443 ssl;

# server_name localhost;

# ssl_certificate cert.pem;

# ssl_certificate_key cert.key;

# ssl_session_cache shared:SSL:1m;

# ssl_session_timeout 5m;

# ssl_ciphers HIGH:!aNULL:!MD5;

# ssl_prefer_server_ciphers on;

# location / {

# root html;

# index index.html index.htm;

# }

#}

}

這里我的后端接口地址為http://127.0.0.1:8888/

prod-api是和api一樣的作用，只是名字不同（一般來(lái)說(shuō)區(qū)別于開發(fā)環(huán)境與生產(chǎn)環(huán)境）

之后重載nginx配置

cd /usr/local/nginx/sbin

./nginx -s reload

之后訪問(wèn)我們的域名就可以訪問(wèn)了

三、注意

需要注意的是 配置文件中一定要按照規(guī)則寫

后面的地址一定要加/ ，不然后端訪問(wèn)失敗

四、參考

1、使用nginx部署多個(gè)前端項(xiàng)目（三種方式）

2、于Nginx反向代理VUE2后SpringSecurity認(rèn)證失敗問(wèn)題解決

3、Centos7安裝nginx并部署前端項(xiàng)目

4、多個(gè)vue項(xiàng)目共用一個(gè)后端（springboot）項(xiàng)目（前端部署到web服務(wù)器nginx,后端部署到應(yīng)用服務(wù)器本地運(yùn)行jar文件）

5、centos開放端口

6、安裝Nginx教程

柚子快報(bào)邀請(qǐng)碼778899分享：運(yùn)維 nginx部署前端教程

http://yzkb.51969.com/

參考鏈接