class CircleInfo extends HTMLElement {
constructor() {
// Always call super first in constructor
super();
// Create a shadow root
const shadow = this.attachShadow({ mode: "open" });
const wrapper = document.createElement("span");
wrapper.className = "content";
wrapper.innerHTML = `
<div class="circle"></div>
`;
const style = document.createElement("style");
style.textContent = `
.content {
height: 400px;
width: 400px;
display: flex;
justify-content: center;
align-items: center;
zoom: 0.05;
}
.circle{width:200px;height:200px;border-radius:50%;box-shadow:0 0 0 10px red,0px 0 0 20px white,0px 0 0 30px red,0px 0 0 40px white,0px 0 0 50px red}
`;
shadow.appendChild(style);
shadow.appendChild(wrapper);
}
}
customElements.define("circle-info", CircleInfo);
//只需要在html的body标签中添加<circle-info><circle-info>
复制代码
前端服务端阿里云oss业务项目编写css的icon代码生成icon预览按需选择使用的icon生成Web Components的js文件上传oss引入资源标签具体选择某个图标渲染前端服务端阿里云oss业务项目
const fs = require('fs');
const chalk = require('chalk');
const path = require('path');
const execa = require('execa');
const { uploadOss } = require('./upload.js');
const run = async (command, commandArgs, opts = {}) => {
await execa(command, commandArgs, { stdio: 'inherit', ...opts });
};
var targetVersion = '0.0.0';
const step = (msg) => console.log(chalk.cyan(msg));
const args = require('minimist')(process.argv.slice(2));
async function main() {
step('\nUpdateVersion...');
await updateVersion();
step('\nUpdateConfig...');
await updateConfig();
step('\nBuildPackage...');
await buildPackage();
console.log(chalk.green(`静态资源构建完成`));
step('\nUploadOss...');
await uploadOss();
console.log(chalk.green(`oss 上传成功`));
step('\nbuildDocker...');
await buildDocker();
console.log(chalk.green(`web docker 发布成功`));
}
async function buildDocker() {
await run('docker', ['rmi', 'fodelf/cssbattleweb']);
await run('docker', ['build', '-t', 'fodelf/cssbattleweb', '.']);
await run('docker', ['push', 'fodelf/cssbattleweb']);
}
async function buildPackage() {
await run('npm', ['run', 'build']);
const { stdout } = await execa('git', ['diff'], { stdio: 'pipe' });
if (stdout) {
step('\nCommitting changes...');
await run('git', ['add', '-A']);
await run('git', ['commit', '-m', `chore(all): release v${targetVersion}`]);
} else {
console.log(chalk.green('No changes to commit.'));
}
}
async function updateVersion() {
const pkgPath = path.resolve(__dirname, '../package.json');
const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'));
const currentVersion = pkg.version;
console.log(chalk.green(`线上版本号${currentVersion}`));
let versions = currentVersion.split('.');
versions[2] = Number(versions[2]) + 1;
targetVersion = versions.join('.');
console.log(chalk.green(`发布版本号${targetVersion}`));
pkg.version = targetVersion;
fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + '\n');
}
async function updateConfig() {
const jsPath = path.resolve(__dirname, '../.umirc.ts');
var data = fs.readFileSync(jsPath, 'utf8');
const pkgPath = path.resolve(__dirname, '../package.json');
const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'));
data = data.replace(
/(\wuwenzhou.*?\')/g,
`wuwenzhou.com.cn/web/${pkg.version}/'`,
);
fs.writeFileSync(jsPath, data);
console.log(chalk.green(`修改配置文件完成`));
}
try {
main();
} catch (error) {
console.log(error);
console.log(chalk.red(`任务失败`));
}
复制代码
RUN sed -i 's|security.debian.org/debian-security|mirrors.ustc.edu.cn/debian-security|g' /etc/apt/sources.list
RUN pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple
复制代码
ENV GOPROXY=https://goproxy.cn,direct
WORKDIR $GOPATH/src/github.com/fodelf/cssbattle
复制代码
user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;
events {
worker_connections 2048;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
client_max_body_size 10M;
server {
listen 80;
server_name *.wuwenzhou.com.cn;
return 301 https://$host$request_uri;
}
server {
listen [::]:443 ssl http2 ipv6only=on;
listen 443 ssl http2;
charset UTF-8;
server_name *.wuwenzhou.com.cn;
client_max_body_size 4M;
root html;
index index.html index.htm;
ssl_certificate /etc/nginx/1_cssbattle.wuwenzhou.com.cn_bundle.crt;
ssl_certificate_key /etc/nginx/2_cssbattle.wuwenzhou.com.cn.key;
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
location ^~ /api/ { # ^~/api 表示匹配前缀为api的请求
proxy_pass http://110.42.220.32:9527; # 注:proxy_pass的结尾有/, -> 效果:会在请求时将/api/*后面的路径直接拼接到后面
# proxy_set_header作用:设置发送到后端服务器(上面proxy_pass)的请求头值
# 【当Host设置为 $http_host 时,则不改变请求头的值;
# 当Host设置为 $proxy_host 时,则会重新设置请求头中的Host信息;
# 当为$host变量时,它的值在请求包含Host请求头时为Host字段的值,在请求未携带Host请求头时为虚拟主机的主域名;
# 当为$host:$proxy_port时,即携带端口发送 ex: $host:8080 】
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr; # 在web服务器端获得用户的真实ip 需配置条件① 【 $remote_addr值 = 用户ip 】
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;# 在web服务器端获得用户的真实ip 需配置条件②
proxy_set_header REMOTE-HOST $remote_addr;
# proxy_set_header X-Forwarded-For $http_x_forwarded_for; # $http_x_forwarded_for变量 = X-Forwarded-For变量
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
}
复制代码
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。