网站部署:使用Nginx部署vue项目到阿里云服务器
创始人
2024-01-20 13:04:41
0

最近租了个阿里云的服务器,想使用Nginx把刚做好的网站部署上去

下载Nginx

目前yum已经有了Nginx的源,因此可以直接用yum下载和安装

yum -y install nginx

默认的安装位置为/etc/nginx
默认的项目位置为/usr/share/nginx
如果安装失败检查是否安装了zlib prce openssl 以及 gcc
查看是否安装:

rpm -qa | grep openssl

安装

yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel

将Vue项目打包好上传到服务器

先在本地打包好生成dist文件夹

npm run build

将dist文件夹上传到:/usr/share/nginx/html/

配置Nginx

打开/etc/nginx/nginx.conf文件,按照如下备注的地方修改

# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;events {worker_connections 1024;
}http {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  /var/log/nginx/access.log  main;sendfile            on;tcp_nopush          on;tcp_nodelay         on;keepalive_timeout   65;types_hash_max_size 4096;include             /etc/nginx/mime.types;default_type        application/octet-stream;# Load modular configuration files from the /etc/nginx/conf.d directory.# See http://nginx.org/en/docs/ngx_core_module.html#include# for more information.include /etc/nginx/conf.d/*.conf;server { #主要修改serverlisten       9000;  #你想设置的端口号server_name  1.1.1.1; #你的服务器的public地址root         /usr/share/nginx/html; #所有项目的根目录,不写也没事# Load configuration files for the default server block.include /etc/nginx/default.d/*.conf;location / { #项目地址root   /usr/share/nginx/html/dist/; #项目的根目录index  index.html index.htm; #默认访问index时的页面try_files $uri /index.html; #}location /api/ {# 设置跨域反向代理rewrite ^.+apis/?(.*)$ /$1 break;  # 重写请求proxy_pass http://1.1.1.1:5000;  # 后端服务器地址}#如果需要配置代理,可以加以下代码location /business {proxy_pass  http://business.app.com;}location /user {proxy_pass  http://user.app.com;}error_page 404 /404.html;location = /404.html {}error_page 500 502 503 504 /50x.html;location = /50x.html {}}# Settings for a TLS enabled server.
#
#    server {
#        listen       443 ssl http2;
#        listen       [::]:443 ssl http2;
#        server_name  _;
#        root         /usr/share/nginx/html;
#
#        ssl_certificate "/etc/pki/nginx/server.crt";
#        ssl_certificate_key "/etc/pki/nginx/private/server.key";
#        ssl_session_cache shared:SSL:1m;
#        ssl_session_timeout  10m;
#        ssl_ciphers HIGH:!aNULL:!MD5;
#        ssl_prefer_server_ciphers on;
#
#        # Load configuration files for the default server block.
#        include /etc/nginx/default.d/*.conf;
#
#        error_page 404 /404.html;
#            location = /40x.html {
#        }
#
#        error_page 500 502 503 504 /50x.html;
#            location = /50x.html {
#        }
#    }}

以上就配置好了Nginx。
接下来启动Nginx,如果之前已经启动了那就重启:这里给一些Nginx的常用命令

start nginx        #启动 Nginx
nginx -s reopen #重启Nginx
nginx -s reload #重新加载Nginx配置文件,然后以优雅的方式重启Nginx
nginx -s stop #强制停止Nginx服务
nginx -s quit #优雅地停止Nginx服务(即处理完所有请求后再停止服务)
nginx -V #显示版本和配置选项信息,然后退出
tasklist /fi "imagename eq nginx.exe"     # 查看windows任务管理器下Nginx的进程命令#或者:
./nginx #启动
./nginx -s stop #关闭
./nginx -s reload #重启
systemctl restart nginx #重启
#启动Nginx并设置开机自动运行
sudo systemctl start nginx.service
sudo systemctl enable nginx.service

防火墙开放端口

firewall-cmd --zone=public --add-port=9000/tcp --permanent

开启之后需要重启防火墙

firewall-cmd --reload

查看是否已开:

firewall-cmd --list-ports

阿里云加入安全组

只有加入安全组之后外网才能访问这个安全组内的所有端口
实例->安全组->配置规则->手动添加(tcp, 端口号(a到b范围),源0.0.0.0)
在这里插入图片描述
加入好安全组之后不需要任何重启就能使用你的项目地址访问到了!

相关内容

热门资讯

喜欢穿一身黑的男生性格(喜欢穿... 今天百科达人给各位分享喜欢穿一身黑的男生性格的知识,其中也会对喜欢穿一身黑衣服的男人人好相处吗进行解...
发春是什么意思(思春和发春是什... 本篇文章极速百科给大家谈谈发春是什么意思,以及思春和发春是什么意思对应的知识点,希望对各位有所帮助,...
网络用语zl是什么意思(zl是... 今天给各位分享网络用语zl是什么意思的知识,其中也会对zl是啥意思是什么网络用语进行解释,如果能碰巧...
为什么酷狗音乐自己唱的歌不能下... 本篇文章极速百科小编给大家谈谈为什么酷狗音乐自己唱的歌不能下载到本地?,以及为什么酷狗下载的歌曲不是...
华为下载未安装的文件去哪找(华... 今天百科达人给各位分享华为下载未安装的文件去哪找的知识,其中也会对华为下载未安装的文件去哪找到进行解...
怎么往应用助手里添加应用(应用... 今天百科达人给各位分享怎么往应用助手里添加应用的知识,其中也会对应用助手怎么添加微信进行解释,如果能...
家里可以做假山养金鱼吗(假山能... 今天百科达人给各位分享家里可以做假山养金鱼吗的知识,其中也会对假山能放鱼缸里吗进行解释,如果能碰巧解...
一帆风顺二龙腾飞三阳开泰祝福语... 本篇文章极速百科给大家谈谈一帆风顺二龙腾飞三阳开泰祝福语,以及一帆风顺二龙腾飞三阳开泰祝福语结婚对应...
美团联名卡审核成功待激活(美团... 今天百科达人给各位分享美团联名卡审核成功待激活的知识,其中也会对美团联名卡审核未通过进行解释,如果能...
四分五裂是什么生肖什么动物(四... 本篇文章极速百科小编给大家谈谈四分五裂是什么生肖什么动物,以及四分五裂打一生肖是什么对应的知识点,希...