New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
如何部署前端dist目录? #1
Comments
部署到七牛云因为手上负责的项目dist包是存储在七牛云的,而且第一个接触到的云存储也是七牛云,所以自然而然想到了七牛云OSS。 已具备条件:
需要做的事:
融合CDN添加域名并绑定bucket融合CDN->域名管理->创建域名 域名添加CNAME解析七牛云域名管理并复制CNAME->腾讯云域名管理->解析->添加记录->记录类型选择CNAME,主机记录填写foo->记录值填写foo-kaigege-cn.qiniudns.com 上传文件到bucket这一步就很有趣了。 唯一的办法就是如何在空间下创建文件夹?
虽然我手上的项目就是上传七牛云,是之前的老大写了一个node脚本按照这种方式上传的,但是当用过阿里云OSS和腾讯云OSS以后,我真心觉得七牛云这个功能有待提高。代码就不贴出了,七牛云提供了各种SDK,python,nodejs等等部署脚本都能写出。 考虑到后期项目部署的方便性,果断放弃上传前端文件到七牛云的方案。 |
部署到阿里云OSS,部署到腾讯云OSS部署到阿里云OSS和部署到腾讯云OSS。 阿里云OSS我实在是找不到收费标准,腾讯云有一个1块钱6个月都免费体验权,因此我就以腾讯云为例子来讲解。 已具备条件:
需要做的事:
为存储桶添加自定义加速域名域名添加CNAME解析域名添加CNAME解析可参考七牛云域名解析,是一样的。 创建文件夹并上传文件此时我们访问:foo.kaigege.cn/foo/index.html是不就可以访问到文件了呢?No。其它文件的请求路径为foo.kaigege.cn/js/app.js。缺失了foo目录。该怎么办呢? 在vue.config.js配置webpack的publicPath为"/foo"即可。 看一下index.html就知道了。
Ok,腾讯云OSS部署前端文件完毕。 |
部署到腾讯云服务器并使用nginx做反向代理为什么会想到这样部署?
于是开始折腾。 已具备条件:
需要做的事:
nginx配置如下# 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/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 2048;
include /etc/nginx/mime.types;
default_type application/octet-stream;
gzip on;
gzip_types text/plain application/javascript text/css;
# 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;
# 配置nginx访问blog.kaigege.cn重定向到frankkai.github.io
server {
listen 80;
server_name blog.kaigege.cn;
location / {
proxy_pass https://frankkai.github.io;
}
}
# 配置nginx访问foo.kaigege.cn加载前端静态文件。
server {
listen 80;
server_name foo.kaigege.cn;
location / {
root /usr/share/nginx/foo;
index index.html;
}
}
server {
listen 80 default_server;
listen [::]:80 default_server;
server_name _;
root /usr/share/nginx/html;
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
location / {}
error_page 404 /404.html;
location = /40x.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
} 对nginx以及nginx 反向代理不熟的话,可以看nginx入门或前端必会的 Nginx入门视频教程(共11集)补充一下。这里就不再赘述了。 腾讯云域名管理解析二级域名到服务器使用fileZIla连接腾讯云服务器上传前端静态文件这个坑是比较多的,需要做以下几件事。
放开腾讯云安全组的22端口腾讯云SSH秘钥下载秘钥配置fileZila新站点添加秘钥新增站点配置上传前端dist目录上传到哪里呢?回看一下nginx的配置。 上面的事情做完了,我们得到的结果是怎样呢?
ok,部署到腾讯云服务器并使用nginx做反向代理完毕。 备注:nginx的反向代理配置中,统一监听了80端口,同样也需要在服务器实例安全组配置中放开。 |
总结与反思
|
前端部署其实也算前端工程化的一部分,这篇博客是我结合实际工作经验和业余探索,总结出的前端部署的一些尝试。一方面自己有所记录,另一方面也能给大家带来些启示。
前提条件:
npm run build / yarn run build
打包出的前端dist包,需要部署到公网环境供用户访问若是对上述一些名词不理解,不用着急,一点一点来。
dist包目录结构如下:
The text was updated successfully, but these errors were encountered: