开发部署使用的服务器:nginx
linux环境:ubuntu16
修改记录:
2021.07.06做修订,测试可用
2021.03.19项目中测试可用
步骤:
# 第一步
修改好vue项目中的URL,使用npm run build命令打包为dist文件夹
# 第二步
下载nginx的压缩包,然后传输到服务器上
或者
在linux使用命令行下载
【wget http://nginx.org/download/nginx-1.13.6.tar.gz】
# 第三步
解压,使用的命令为
【tar -zvxf nginx-1.13.6.tar.gz】
# 第四步
因为Nginx是高度自由化的Web服务器,它的功能是由许多模块来支持。如果使用了某个模块,这个模块使用了一些类似zlib或OpenSSL等的第三方库,那么就必须先安装这些软件。Ubuntu下不像在centOS中使用yum直接在线安装,可以使用以下方法。使用的命令为:
【apt-get install libpcre3 libpcre3-dev 】
【apt-get install zlib1g-dev 】
如果不执行上面的命令,会报错
# 第五步
使用的命令为
【mkdir /usr/local/nginx】在/usr/local下新建nginx文件夹
【/usr/local/nginx-1.13.6/configure --prefix=/usr/local/nginx --with-http_gzip_static_module】
--prefix=/usr/local/nginx的目的是指定nginx编译安装后的路径,路径为/usr/local/nginx
--with-http_gzip_static_module的目的是为了配置gzip
# 第六步
编译nginx,使用的命令为
【make】
# 第七步
安装nginx,把生成的 2 进制复制到 prefix 指定的安装路径里(即上面指定的/usr/local/nginx)
【make install】
这一步结束后,会出现以下提示
make[1]: Leaving directory `/usr/local/nginx;
# 第八步
跳转到上面的文件夹下
【cd /usr/local/nginx】
# 第九步
修改config文件夹下的nginx.conf文件
第一处修改 server {
#此处的端口号修改为实际发布的端口号(前提是在vue项目中并未指定发布的端口号,也就说没有在config目录下的prod.env.js文件当中配置我们后端服务器的IP地址和端口号)
listen 8056;
server_name localhost;
#使用gzip的目的是为了加快前端的访问速度
#可以参考https://blog.csdn.net/qq_43338182/article/details/103251320中的第三种方法
gzip on;
gzip_static on;
gzip_min_length 1024;
gzip_buffers 4 16k;
gzip_comp_level 2;
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;
gzip_vary off;
gzip_disable "MSIE [1-6]\.";
第二处修改
粘贴与location / 同级
location /api {
# 此处是为了配置跨域 ,到时候会拼接到API接口的前面
# 例如,访问的接口是/api/query
# 实际访问的是 http://XXX:xxx/api/query(这是访问的后端地址)
proxy_pass http://ip地址:端口号/api; #此处的/api并不多余,而是为了配置跨域,这个地方的名称适合location后面的一致的
proxy_http_version 1.1;
proxy_redirect off;
proxy_connect_timeout 30;
proxy_set_header Host $host:$server_port;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
#proxy_cache cache_one;
proxy_cache_valid 200 304 24h;
proxy_cache_valid any 10m;
add_header Nginx-Cache "$upstream_cache_status";
proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;
}
# 第十步
将vue项目打包生成的dist文件夹下的内容copy到/usr/local/nginx(前面指定的)/html文件夹下面(注意不是将整个dist文件夹,只是将里面的内容,即copy的是dist里面的内容,而不是整个dist文件夹)
#第十一步
启动ngnix,执行下面的命令
【sbin/nginx】
# 第十二步
在浏览器中输入地址,就可以访问了
####完毕
html文件夹下的内容为(除了50x.html其他都是从dist文件夹下copy的)
修改完毕后,config文件夹下nginx.config文件中的server部分如下:
server {
listen 8056;
server_name localhost;
gzip on;
gzip_static on;
gzip_min_length 1024;
gzip_buffers 4 16k;
gzip_comp_level 2;
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;
gzip_vary off;
gzip_disable "MSIE [1-6]\.";
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html;
index index.html index.htm;
}
#粘贴处
location /api {
proxy_pass http://localhost:8000/api;
proxy_http_version 1.1;
proxy_redirect off;
proxy_connect_timeout 30;
proxy_set_header Host $host:$server_port;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
#proxy_cache cache_one;
proxy_cache_valid 200 304 24h;
proxy_cache_valid any 10m;
add_header Nginx-Cache "$upstream_cache_status";
proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
补充:如何停止nginx服务?
执行下面的命令,查看nginx占用的端口号
【ps -ef | grep nginx】
然后执行
【kill -9 端口号】
即可停止nginx服务(貌似要杀掉两个进程)
参考链接:
https://blog.csdn.net/weixin_40000999/article/details/111549827
https://blog.csdn.net/duguyuyun12345/article/details/83471821
https://blog.csdn.net/king_kgh/article/details/74973040
https://www.fujieace.com/nginx/make1-leaving-directory-usrlocalnginx.html
https://blog.csdn.net/zhuchunyan_aijia/article/details/79113964
https://blog.csdn.net/somanlee/article/details/69808788